OKblog

Problémy s :first-letter

Sobota, 19. května 2007 15.22 Webdesign

Narazil jsem na zvláštní problém u pseudo-třídy :first-letter v CSS. Podle pravidel typografie by se měl první řádek odsazovat od levého okraje. (Neplatí pro odstavec, před kterým je nadpis – kdysi to rozebíral Dero.) Chtěl jsem tento způsob taky použít, ale… ne všude funguje.

Úplně na začátku ale musím připomenout, proč jsem nerozhodl pro vlastnost text-indent, která je k tomu určená. Je to jednoduché – text-indent totiž odsazuje celý řádek, tedy i ostatní prvky v něm (například samostatné obrázky). Proto jsem chtěl zkusit odsadit řádek pomocí aplikování marginu na první písmeno prvního řádku – :first-letter.

:first-letter totiž nastavuje vlastnosti jen onoho prvního písmene. Pokud tedy bude mít například margin-left: 15px;, měl by se celý první řádek odstavce odsadit o patnáct pixelů. Měl. Jenomže tomu tak není, pokud první písmeno něčím obalíme – vyzkoušel jsem odkaz a tag <strong>. (Příklad)

Opera

First letter

Jak je vidět z obrázku, v Opeře není žádný problém. Odkaz je na svém místě, zvýraznění taktéž. Není co řešit.

Internet Explorer 6

First letter

Kdo u tohoto prohlížeče nečekal problém, je opravdu velký optimista. Odkaz je prodloužený k okraji odstavce, přestože k tomu není jediný důvod. Zvýraznění je už ale v pořádku. Zajímavé je, že při pokusu označit text myší, IE6 spadne…

Internet Explorer 7

First letter

V sedmé verzi Internet Exploreru je jak mávnutím kouzelného proutku všechno v pořádku. I když… Všechno úplně ne. Pokud má odstavec taky nastavený margin, u prvního řádku se zruší a aplikuje se jen ten náležící :first-letter. (Příklad: Odstavec má margin-left: 100px;, first-letter má 15px. První řádek tedy nebude odsazený o 115px, ale jen o patnáct.)

Firefox 2

First letter

Ani Firefox není bezchybný. Jeho chování se v tomto nápadně podobá IE6 s ještě další chybou – při najetí na odkaz se margin prvního písmene úplně zruší a odkaz se připlácne na okraj:

First letter

Konqueror 3.5.5

First letter

V Konqueroru se odkaz opět prodlouží k okraji odstavce. Ale je tady ještě další chyba – první písmeno bude mít vždy černou barvu (pokud není ve stylu nastaveno jinak), přestože jde o odkaz. A taky nebude tučné, přestože je zvýrazněno…

Co s tím?

Popravdě řečeno – asi nic. Dá se to řešit dvě způsoby: buď nepoužívat :first-letter, nebo používat vlastnost text-indent s tím, co jsem uvedl na začátku.

předchozí další


Související články

Komentáře (13)

 
sobota, 19. května 2007 15:40:49

Hoď mi tu testovací stránku někam na net a poskytnu ti screen ze Safari, yop? Jsem zvědavý, jestli bude výsledek stejný, jako v Konqueroru :)

 
sobota, 19. května 2007 15:41:55

[1] miloso: Kdybys četl pozorněji, tak najdeš odkaz – http://kandera.net/blog/files/firstletter-bug.html :D

 
sobota, 19. května 2007 15:42:56

Och, jsem slepý :D Screen bude za chvilku, jen dobrigáduju :)

 
sobota, 19. května 2007 16:00:29

Hmm, zajímavé :)
Safari ? http://temp.milanvit.net/os-x/firstletter-safari.png
Camino ? http://temp.milanvit.net/os-x/firstletter-camino.png

 
sobota, 19. května 2007 18:43:01

Dero napsal na toto js fičůrku, která ti to zajistí pomocí js a nemusíš ani nezarovnaným odstavcům nastavovat spec. třídu.

Jinak s odsazováním nesouhlasím a neuplatňuji. Zarovnání má smysl v knize, kde jsou odstavce mezi sebou k rozzeznání pouze tímto odsazením. Samozřejmě kromě odstavce následujícího nadpis. Web ale není kniha. Odstavce je mnohem lépe odsazovat od sebe horizontální mezerou. Odsazení se také hůře čte a není estetické.

 
sobota, 19. května 2007 18:48:34

[5] Petr Tichý: Viz první odstavec ;)

S tím bych až tak nesouhlasil. Odsazený text vypadá odlehčeněji, ne jako obyčejný blok textu (se zarovnáním do bloku to potom vypadá ještě hůř). Ani bych neřekl, že se čte hůř. Spíš naopak – opticky odlehčuje text a vede oko přímo na začátek řádku.

V knize rozhodně najde větší uplatnění a tvrzení, že web není kniha, není tak úplně přesné. Proč se právě na webu hodně lpí na typografických pravidlech stejně jako v knize? A odsazení by výjimku dostávat nemělo…

 
sobota, 19. května 2007 19:44:28

No jo … další z důvodů, proč se stát Operáčkem.

 
sobota, 19. května 2007 21:17:16

[4] miloso: chci taky MaC :D

 
sobota, 19. května 2007 22:14:17

[8] Zedjunior: To spousta lidí, to spousta :D

 
neděle, 20. května 2007 8:15:02

Možná by stálo za to reportovat to jako bug. Škoda že neumím pořádně anglicky.

 
neděle, 20. května 2007 15:27:36

Zrovna před chvilenkou jsem text-indent používal. first-letter jsem snad nikdy nepoužil…

 
neděle, 20. května 2007 15:33:04

[10] Šlaha: Jo, asi by to stálo za to. Jenomže se mi do toho nechce a nejsem si úplně jistý, jestli to má smysl a jestli takový bug už není reportovaný…

[11] maikeroo: Normálně bych použil text-indent, ale viz druhý odstavec. Potřeboval jsem odsadit jenom první řádek textu (ne obrázek, ne object, ne něco jiného, jenom text)

 
sobota, 26. května 2007 8:27:31

[12] xergic: Já jsem to reportnul klukům od KDE, tak uvidíme

K tomuto článku již není možné přidávat komentáře.