[Instrukcja] Formatowanie tekstu w postach

Sugestie, opinie, skargi i zażalenia itp.
ODPOWIEDZ
Awatar użytkownika
dziobu
Zasłużony
Postów w temacie: 3
Posty: 8535
Rejestracja: 28 gru 2016, 16:38
Drukarka: ZMorph 2.0(S)
x 5546
Kontakt:
Skontaktuj się z dziobu

[Instrukcja] Formatowanie tekstu w postach

Post autor: dziobu »

Pewnie każdy zauważył szereg tajemniczych przycisków nad polem tekstowym z wiadomością. Podstawowe jak pogrubienie czy kolor tekstu są chyba wszystkim znane, ale jest kilka mniej popularnych pozycji - i je chciałbym tu opisać.

Quote nie opisuję - szablon jest zawsze podczas cytowania kogokolwiek; to chyba nie wymaga komentarza.

UWAGA!Wszystkie wcięcia w poniższych kodach źródłowych mają na celu tylko zwiększenie czytelności i nie wpływają na formatowanie tekstu.

1. CODE
Wbrew temu co by się wydawało, ten znacznik jest niemal zapomniany. Pozwala na zapisanie fragmentu tekstu bez żadnego formatowania czy ucinania białych znaków. Np - chcę pokazac jak zapisać pogrubienie, ale z automatu skrypt mi zamienia mój przykład na gruby tekst. Rozwiązaniem jest otoczenie go takiem "code":

Kod: Zaznacz cały

[b]pogrubienie[/b]
czyli napisanie tego:

Kod: Zaznacz cały

[code][b]pogrubienie[/b]
[/code]

Tak powyższa częsc posta wygląda w rzeczywistości w edytorze:
code1.jpg
A teraz w drugą stronę - mam tekst konsolowy który wymaga do zapisania czcionki o stałej szerokości a całość wyrównana jest spacjami. Dobrym przykładem będzie kawałek kodu źródłowego:

-------------------------------------------------------------------------------
L := Length(S);
n := 1;
while (I <= L) and (S[n] <= ' ') do
Inc(I);

if I > L then
begin
Result := '';
end else
begin
while S[L] <= ' ' do
Dec(L);

L := L - n + 1;
if L > 0 then
begin
SetLength(Result, L);
CopyMemory(@Result[1], @S[n], L*2);
end else
Result := '';
end;
-------------------------------------------------------------------------------

Chyba każdy przyzna że nie jest szczególnie czytelny. Co innego jak zapisze się go tak:

Kod: Zaznacz cały

-------------------------------------------------------------------------------
L := Length(S);
i := 1;
while (I <= L) and (S[i] <= ' ') do
  Inc(I);

if I > L then
begin
  Result := '';
end else
begin
  while S[L] <= ' ' do
    Dec(L);

  L := L - i + 1;
  if L > 0 then
  begin
    SetLength(Result, L);
    CopyMemory(@Result[1], @S[i], L*2);
  end else
    Result := '';
end;
-------------------------------------------------------------------------------
Ciekawostka - w powyższym przykładzie tekst (S) jest indeksowany zmienną "i". W tagu CODE zamieściłem oryginał i tu to widać. Natomiast w niesformatowanym przykładzie jeszcze wyżej musiałem zamienić go na "n" ([ n ]), ponieważ [ i ] oznacza włączenie kursywy. Do tego - znacznik jest usuwany co w kodzie źródłowym nie jest pożądane. Właśnie z tego powodu, kod źródłowy - czy to kod progamu, strony czy byle plik konfiguracyjny - dobrze jest zamieszczać z użyciem CODE.../CODE.

2. LIST
Często wymienianie listy pozycji (elementów, adresów, sprzętu, itp) jest nieczytelne - "pauza" sprawdza się na kartce, w sieci wygląda już gorzej.
Format listy to:
  • całość otoczona tagami LIST,
  • każdy element rozpoczyna się tagiem * (gwiazdka); i - tu wyjątek - nie ma on zakończenia.
W praktyce wygląda to tak:
Kod źródłowyWynik wizualny

Kod: Zaznacz cały

[list]
[*]Pierwsza pozycja
[*]Druga pozycja
[*]Trzecia pozycja
[/list]
  • Pierwsza pozycja
  • Druga pozycja
  • Trzecia pozycja
Oczywiście nic nie stoi na przeszkodzie żeby napisać to wszystko w jednej linii:
Kod źródłowyWynik wizualny

Kod: Zaznacz cały

[list][*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list]
  • Pierwsza pozycja
  • Druga pozycja
  • Trzecia pozycja
Każdy użytkownik Worda czy innego edytora może zatęsknić za listą numerowaną - niepotrzebnie:
Kod źródłowyWynik wizualny

Kod: Zaznacz cały

[list=1]
[*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list]
(list=1)
  1. Pierwsza pozycja
  2. Druga pozycja
  3. Trzecia pozycja

Kod: Zaznacz cały

[list=a]
[*]Pierwsza pozycja[*]Druga pozycja[*]Trzecia pozycja[/list]
(list=a)
  1. Pierwsza pozycja
  2. Druga pozycja
  3. Trzecia pozycja
To teraz moze trochę skomplikować zabawę - lista w liście. Dlaczego nie. Przecież można w ramach jednego taga zawrzeć drugi, dlaczego więc nie taki sam?
Kod źródłowyWynik wizualny

Kod: Zaznacz cały

[list][*]Pierwsza lista
    [list=1][*]element 1
    [*]element 2
    [*]element 3
    [*]element 4
    [/list]
[*]Druga pozycja
[*]Trzecia pozycja
    [list=a][*]element 1
    [*]element 2
        [list][*]cośtam
        [*]inne cośtam
        [*]jeszcze inne cośtam
        [/list]
    [*]element 3
    [/list]
[/list]
  • Pierwsza lista
    1. element 1
    2. element 2
    3. element 3
    4. element 4
  • Druga pozycja
  • Trzecia pozycja
    1. element 1
    2. element 2
      • cośtam
      • inne cośtam
      • jeszcze inne cośtam
    3. element 3

Kod: Zaznacz cały

[list][*]Dodam,
  [list][*]że
    [list][*]takich
      [list][*]list
        [list][*]można
          [list][*]zagłębić
            [list][*]dowolnie
              [list][*]dużo
              [/list]
            [/list]
          [/list]
        [/list]
      [/list]
    [/list]
  [/list]
[/list]
  • Dodam,
    • że
      • takich
        • list
          • można
            • zagłębić
              • dowolnie
                • dużo
3. IMG
Jeśli bardzo nie trzeba, nie używajcie tego ;) Zdjęcia na zewnętrznych serwerach giną czy są usuwane, a treść z przykładowymi obrazkami - których wtedy nie ma - jest bezwartościowa. Bardziej polecam załączać zdjęcia do postów:
viewtopic.php?f=22&t=2109&view=unread#unread

4. TABLE
Jak widać na przykładzie tego posta, tabelki są fajne i przydatne. (na chwile obecną są też brzydkie i zupełnie niekonfigurowalne, ale co tam ;))

Ogólne zasady:
  • Całość tabelki zamyka się tagami TABLE
    • samo "TABLE" tworzy tabelkę o szerokości całego dostępnego miejsca (zmienia się wraz ze zmianą szerokości okna przeglądarki!),
    • "TABLE=XXX" tworzy tabelkę o szerokości podanej jako XXX (w pikselach).
  • Tabelkę zapisuje się wierszami, tę natomiast oznacza się tak: TR <kolejno komórki wiersza> /TR
  • Komórki:
    • nagłówek: TH <zawartość> /TH
    • normalna komórka: TD <zawartość> /TD
To teraz przykłady: (niestety tabelki nie da się zapisać w innej tabelce więc tu nie mogę umieścić kodu i wyniku w poziomie)
Kod źródłowy:

Kod: Zaznacz cały

[table]
  [tr]  [th]  Nagłówek 1  [/th]  [th]  Nagłówek 2  [/th]  [/tr]
  [tr]  [td]  dane 1      [/td]  [td]  dane 2      [/td]  [/tr]
  [tr]  [td]  dane 3      [/td]  [td]  dane 4      [/td]  [/tr]
[/table]
A tak to się prezentuje:
Nagłówek 1 Nagłówek 2
dane 1 dane 2
dane 3 dane 4
Ta sama tabelka z ograniczoną szerokością do 200 pikseli:
Kod źródłowy:

Kod: Zaznacz cały

[table=200]
  [tr]  [th]  Nagłówek 1  [/th]  [th]  Nagłówek 2  [/th]  [/tr]
  [tr]  [td]  dane 1      [/td]  [td]  dane 2      [/td]  [/tr]
  [tr]  [td]  dane 3      [/td]  [td]  dane 4      [/td]  [/tr]
[/table]
I wynik:
Nagłówek 1 Nagłówek 2
dane 1 dane 2
dane 3 dane 4
5. YOUTUBE
Czasem pojawia się pytanie jak prawidłowo zamieścić film z YT:
chwilowo jedynym działającym sposobem żeby znacznik YOUTUBE zadziałał poprawnie jest umieszczenie w nim linku w formacie https://www.youtube.com/watch?v=Vrbtn9XeSTI, tj:
  • domena youtube.com,
  • zawierającym TYLKO identyfikator filmu; żadnych dodatkowych znaczników,
  • i to tyle
Nie zadziała: Zamieszczenie samego filmu jest już proste:

Kod: Zaznacz cały

[youtube]https://www.youtube.com/watch?v=Vrbtn9XeSTI[/youtube]
czyli:


źródło: https://www.youtube.com/watch?v=Vrbtn9XeSTI
Pjoter, WillingMagic, Cosik, FlameRunner, Abys, JGFTW, Adinfo, Andrzej_W, Kopytko
Na górę
Awatar użytkownika
dziobu
Zasłużony
Postów w temacie: 3
Posty: 8535
Rejestracja: 28 gru 2016, 16:38
Drukarka: ZMorph 2.0(S)
x 5546
Kontakt:
Skontaktuj się z dziobu

Re: [Instrukcja] Formatowanie tekstu w postach

Post autor: dziobu »

Po krótkiej namowie @FlameRunner dorzucił pewne modyfikacje tabelek. Kolorowego ryjbuka tu nie będzie, ale i tak skok funkcjonalny jest imho wystarczający na potrzeby forum.

Pomysł na modyfikacje jest mój, a jako że nie znam HTMLa na tyle na ile powinienem to ewentualne uwagi nt samego rozwiązania jak i wybranych parametrów należy kierować do mnie. (ja te uwagi od razu wyciepię na hasiok, ale to inna kwestia :D)

6. TABLE2
Całość działa i zachowuje się jak zwykła tabela (Table z poprzedniego posta). Inna jest nazwa tagów (doszła cyfra "2") i parametry. Jest możliwość zadania grubości obwiedni, wymuszenia szerokości kolumn oraz łączenia komórek w pionie i w poziomie.

Dostępne tagi:
  • table2 b=... (definicja tabeli)
    • b - grubość obwódki [px]
  • th2 w=... b=... cs=... (definicja nagłówka kolumny)[/color]
    • w - szerokość kolumny [%]
    • b - grubość obwódki [px]
    • cs - wartość dla colspan [ilość kolumn]
  • td2 w=... b=... cs=... rs=... (definicja komórki)
    • w - szerokość kolumny [%]
    • b - grubość obwódki [px]
    • cs - wartość dla colspan [ilość kolumn]
    • rs - wartość dla rowspan [ilość wierszy]
A po co to wszystko?
A no po to:
Kod źródłowy

Kod: Zaznacz cały

[table2 b=1]
[tr]
  [th2 w=20 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=60 b=1 cs=2]Nagłówek 2[/th2]
  [th2 w=20 b=0 cs=1]Nagłówek 3[/th2]
[/tr]
[tr]
[td2 w=20 b=1 cs=1 rs=2]Dane 1[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 2[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 3[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 4[/td2]
[/tr]
[tr]
[td2 w=25 b=1 cs=1 rs=1]Dane 5[/td2]
  [td2 w=25 b=1 cs=2 rs=2]Dane 6[/td2]
[/tr]
[tr]
[td2 w=25 b=1 cs=1 rs=1]Dane 8[/td2]
  [td2 w=25 b=1 cs=1 rs=1]Dane 9[/td2]
[/tr]
[/table2]
I część wizualna:
Nagłówek 1 Nagłówek 2 Nagłówek 3
Dane 1 Dane 2 Dane 3 Dane 4
Dane 5 Dane 6
Dane 8 Dane 9
Można też ukryć wybrane linie:

Kod: Zaznacz cały

[table2 b=0]
[tr]
  [th2 w=33 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=33 b=1 cs=1]Nagłówek 2[/th2]
  [th2 w=33 b=1 cs=1]Nagłówek 3[/th2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 1[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 2[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 3[/td2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 4[/td2]
  [td2 w=33 b=3 cs=1 rs=1]Dane 5[/td2]
  [td2 w=33 b=3 cs=1 rs=1]Dane 6[/td2]
[/tr]
[/table2]
Nagłówek 1 Nagłówek 2 Nagłówek 3
Dane 1 Dane 2 Dane 3
Dane 4 Dane 5 Dane 6
Inne mniej lub bardziej praktyczne zastosowania:

Kod: Zaznacz cały

[table2 b=3]
[tr]
  [th2 w=50 b=0 cs=1]Nagłówek 1[/th2]
  [th2 w=50 b=0 cs=1]Nagłówek 2[/th2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 1[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 2[/td2]
[/tr]
[tr]
  [td2 w=33 b=0 cs=1 rs=1]Dane 3[/td2]
  [td2 w=33 b=0 cs=1 rs=1]Dane 4[/td2]
[/tr]
[/table2]
Nagłówek 1 Nagłówek 2
Dane 1 Dane 2
Dane 3 Dane 4

Kod: Zaznacz cały

[table2 b=0]
[tr]
  [th2 w=20 b=0 cs=1][/th2]
  [th2 w=30 b=1 cs=1]Nagłówek 1[/th2]
  [th2 w=30 b=1 cs=1]Nagłówek 2[/th2]
  [th2 w=20 b=0 cs=1][/th2]
[/tr]
[tr]
  [td2 w=1 b=0 cs=1 rs=1][/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 1[/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 2[/td2]
[/tr]
[tr]
  [td2 w=1 b=0 cs=1 rs=1][/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 3[/td2]
  [td2 w=1 b=1 cs=1 rs=1]Dane 4[/td2]
[/tr]
[/table2]
Nagłówek 1 Nagłówek 2
Dane 1 Dane 2
Dane 3 Dane 4
FlameRunner, Abys, JGFTW, Adinfo, kamilxxg, Kopytko
Na górę
Awatar użytkownika
dziobu
Zasłużony
Postów w temacie: 3
Posty: 8535
Rejestracja: 28 gru 2016, 16:38
Drukarka: ZMorph 2.0(S)
x 5546
Kontakt:
Skontaktuj się z dziobu

Re: [Instrukcja] Formatowanie tekstu w postach

Post autor: dziobu »

7. Box, BoxC
Wyświetla okienko na całą szerokość posta z zadeklarowanym kolorem tła i czcionki.

Kod: Zaznacz cały

[box=red]test[/box]
test
BoxC robi to samo, ale wyrównuje tekst do środka okna.

Kod: Zaznacz cały

[boxc=red]test[/boxc]
test


8. Frac, Sup, Sub[/size]
Ułamek zwykł, indeks górny i indeks dolny.
Wartościami mogą być także teksty, nie tylko liczby.

Kod: Zaznacz cały

[frac]2/3[/frac]
2⁄3

Kod: Zaznacz cały

[frac]ale/fajne[/frac]
ale⁄fajne


Podobnie jest z indeksem górnym i dolnym:

Kod: Zaznacz cały

cośtam[sup]2[/sup]
cośtam2

Kod: Zaznacz cały

cośtam[sup]też tekst[/sup]
cośtamteż tekst

Kod: Zaznacz cały

cośtam[sub]2[/sub]
cośtam2

Kod: Zaznacz cały

cośtam[sub]też tekst[/sub]
cośtamteż tekst
Andrzej_W, Abys, Kopytko
Na górę
ODPOWIEDZ

Wróć do „Funkcjonowanie forum”