Madagaskar08

Wraz z poprzednią, zdaje się, aktualizacją skryptu (przynajmniej ja go wcześniej nie zauważyłem) pojawił się problem z formatowaniem tekstu. Spróbuję tu opisać, jak można to robić na dwa sposoby.

Od czego zaczynamy

Zawsze należy zacząć wprowadzanie wpisu od określenia tytułu. Poniżej tytułu pojawia się wtedy bezpośredni odnośnik, który jest adresem sieciowym wpisu. Adres ten powinien być unikalny na blogu i w tym celu zawiera m. in. aktualną datę (tutaj jest to https://madagaskar08.pl/blog/2013/09/02/formatowanie-tekstu-reczne/ ‎). Niezachowanie unikalności np. przy wprowadzaniu kolejnego dziś szkicu o tym samym tytule prowadzi do niepowodzenia!

Metoda naturalna (dla WodrPress’a)

Mając tekst napisany w dowolnym edytorze (Word, LibreOffiice lub podobny) możemy wkleić go w edytorek bloga na dwa sposoby: w trybie wizualnym lub tekstowym. Użycie trybu wizualnego teoretycznie powinno nam zachować wszystkie ustawione w tekście pierwotnym atrybuty – kolor i rozmiar czcionki, akapity i wyjustowanie. Zapewne warto zawsze spróbować, czy tak sporządzony wpis pozwala się zapisać i czy przedstawia się tak, jak chcemy. W tym sposobie ewentualne poprawki należy robić na tekście pierwotnym, i ponownie skopiować całość. Próby poprawiania już sformatowanego tekstu mogą prowadzić do niepowodzenia spod znaku „Page not found”. Powodzenie akcji każdorazowo sprawdzamy poprzez przycisk „Podejrzyj”.

Być może lepszy efekt uzyskamy, wklejając tekst sformatowany ze schowka przez użycie klawiszka z literą W w dolnym wierszu paska przycisków zamiast Ctrl+V

Jeżeli ten sposób się nie sprawdzi, proponuję wykasować całą zawartość edytorka, przełączyć się w tryb tekstowy i wkleić tekst w tym trybie. Tracimy wtedy całe formatowanie tekstu pierwotnego, za to możemy go formatować narzędziami edytorka. Najprostsze formatowanie (wytłuszczenie i kursywa) są dostępne już w oknie tekstowym (klawisze b i i ). po przełączeniu w tryb wizualny mamy do dyspozycji jeszcze podkreślenie, przekreślenie, kolor czcionki i dopasowanie tekstu w poziomie. Aby korzystać z tych narzędzi, należy zaznaczyć żądany fragment tekstu i wcisnąć odpowiedni klawisz. Jeżeli stosujemy kilka formatowań do tego samego fragmentu tekstu, trzeba zwrócić uwagę na kolejność: użycie wytłuszczenia po zmianie koloru spowoduje niepowodzenie. Jeżeli zaobserwujemy je na podglądzie, szybko może pomóc wycofanie się z ostatniej zmiany (ponowne użycie tego samego klawisza przy tym samym zaznaczeniu) i możemy spróbować odwrócić kolejność. Jeżeli ten prosty sposób nie zadziała, skrypt pozwala nam wrócić do jednej z poprzednio zapisanych wersji – dlatego przed większymi zmianami warto użyć klawisza „Zapisz szkic”.

Metoda „ręczna”

Jeżeli w żaden sposób nie daje się uzyskać żądanego efektu metodą naturalną, możemy próbować formatować ręcznie. Jest to mniej wygodne, za to daje „lżejsze” wpisy i może być bardziej precyzyjne. Robimy to zawsze i wyłącznie w trybie tekstowym edytorka.

Do definiowania format tekstu służą znaczniki, tzw.tagi, obejmujące dany fragment tekstu. Są one wyróżniane nawiasami ostrymi < i > i zawsze występują w parach. Tag otwierający zawiera nazwę znacznika oraz ewentualne parametry; tag kończący zawiera wyłącznie nazwę poprzedzoną ukośnikiem /. Np. aby uzyskać wytłuszczenie słowa gruby, wpisujemy w trybie tekstowym następujący tekst:

<b>gruby</b>  lub <strong>gruby</strong>

W przykładzie tym b i strong to nazwy znaczników o identycznej funkcji. Przykład ten możemy oczywiście zobaczyć używając klawisza b w trybie tekstowym, jak wspomniałem powyżej.

Istotne jest, aby tagi nie krzyżowały się, tzn. poprawne są zapisy <b><i>tekst</i></b> jak i <i><b>tekst</b></i>, natomiast niepoprawny jest <b><i>tekst</b></i>

Przydatne znaczniki (wielkość liter w nazwie taga nie ma znaczenia):

p – wyróżnia akapit. Wewnątrz niego nie należy stosować nowej linii (klawisz ENTER); treść akapitu należy wpisywać ciurkiem. Akceptuje parametr style (o czym później).

div – wyróżnia blok tekstu, również akceptuje parametr style

span – wyróżnia fragment tekstu, również akceptuje parametr style

W zasadzie całe formatowanie kryje się w parametrze style. Ma on postać: style=”atrybut1: wartość1; atrybut2: wartość2;…”, na przykład:

<p style=”color: #000080; text-alignment: center”>linia wiersza</p>

spowoduje wyświetlenie wyśrodkowanego tekstu „linia wiersza” w kolorze ciemnoniebieskim. Należy pamiętać o prawidłowym otwieraniu i zamykaniu definicji stylu cudzysłowem, jak widać w powyższym przykładzie.

Atrybuty stosowane w stylach (niektóre):

color – definiuje kolor czcionki poprzez tekst zaczynający się od # i zawierający 3 dwucyfrowe (szesnastkowe) grupy, definiujące składowe koloru czerwoną, zieloną i niebieską. Brzmi to skomplikowanie, dlatego najprościej „zabarwić” sobie pojedyncze słowo w trybie wizualnym i wróciwszy do tekstowego podejrzeć efekt – tu mamy wpis <span style=”color: #800000;”>efekt</span>. Tym stylem można potem opisywać inne fragmenty tekstu.

background-color – w taki sam sposób definiuje kolor tła.

text-alignment – definiuje wyśrodkowanie (center), dosunięcie do lewej (left), do prawej (right) lub obustronne czyli wyjustowanie (justify)

text-indent – wcięcie akapitu; jako wartość można podać np  1cm;

Ustawiane w bloku div atrybuty stylu mogą dotyczyć wielu zawartych w nim akapitów; z kolei atrybuty stylu w tych akapitach mogą zmieniać zewnętrzne definicje z bloku.

Zarówno tagów jak i atrybutów stylu jest wiele więcej; jeżeli ktoś zechce, wskażę gdzie ich szukać – lub podpowiem pojedyncze.

Na koniec przypomnę podstawowe zasady:

• każdy otwarty tag powinien zostać zamknięty
• Tag otwarty wewnątrz innego powinien zostać zamknięty wewnątrz niego
• każda definicja stylu musi zaczynać się i kończyć znakiem cudzysłowu „
• skutki wprowadzonych poprawek oglądamy poprzez „Podejrzyj”
• nie wszystkie atrybuty stylu dają ten sam efekt w różnych znacznikach (bywa, że nie dają)

Po wprowadzeni ręcznym formatowania odradzam przechodzenie w tryb wizualny – skrypt może zechcieć porządkować tagi zgodnie ze swoimi regułami i popsuć efekt, aż do „Page not found” włącznie. Kilka kodów ulubionych kolorów warto sobie zanotować lub ustalać je na samym początku formatowania.

I jeszcze dwa słowa na temat przyczyn kłopotów. Istnieje niestety kilka wariantów zestawów znaczników (po prawdzie każda przeglądarka ma nieco inny) i najprawdopodobniej przyczyną niepowodzeń jest niezbyt udolne poprawianie przez skrypt niepewnych – jego zdaniem – układów znaczników, o czym świadczy trefna kolejność pogrubienia i koloru. Bywa jak widać lekarstwo gorsze chyba od choroby 😉