ipsace i tiskace
30.12.2005
Optimalisováno pro gecko?
Před více než rokem jsem na jeden firemní web umístil do patičky větu: "Optimalisováno pro firefox". Ten web totiž vypadal ve firefoxu a mozille nejlépe, v jiných prohlížečích hůře, ale ne zas tak hrozně, jako tento blog v IE bez nastaveneho stylu pro IE.
Je zajímavé, jak inkriminovaná věta působí na některé webdesignery coby červený hadr na býka. Zmínil jsem se o tom webu nějakým lidem z czilly.cz a byl jsem zahlušen sprškou nadávek, co že si to vlastně dovoluju.
Argumenty zněly trochu ve smyslu "Když je stránka validní, zobrazí se správně všude, ve všech browserech, které umějí zobrazovat web, tedy automaticky i v mozille." Tento argument bude níže rozmetán v prach, pročež jsem tu větu oblíbil a slíbil si, že ji budu cpát všude, kde zanechám stopy svých nečistých kodérských pařátů.
Před pár dny jsem četl mnohem zásadnější argument. Arthur Dent tu větu přeložil do srozumitelnější podoby: "Jsme neschopní napsat web takový, aby vypadal všude dobře, tak vám napíšeme, v čem na něj máte koukat..."
Ano, tohle nelze popřít, a být renomovaným webstudiem, asi bych si moc rozmýšlel, jestli tu větu někdy někam napíšu. Ale já nejsem ani reno, ani movaný, proto si můžu dovolit psát pravdu. Zvlášť ve světle posledního zjištění, že ani dvě různá gecka nezobrazí web na jednom OS stejně.
Pokud se mezi Vámi najde nějaký webmistr, guru, který následující problém rozlouskne, nasypu si popel na hlavu. Ale zde nepomůže žádný podtržítkový ani hvězdičkový hack, s tím nehne ani pár volů. Přitom je to triviální věc. Iniciála. Podívejte se na následující obrázky.
Vlevo je začátek tohoto spotu v gecku 1.7, vpravo totéž na stejném poči v gecku 1.8. Všimněte si toho velkého "N" (iniciály). Zatímco vlevo jeho horní hrana skoro "zařezává" s horní hranou prvního řádku, vpravo je asi o 11 px posunuté směrem nahoru.
To posunutí je tak značné, že třetí řádek je vlevo ještě odsazen vpravo vedle iniciály, vpravo už začíná na levém okraji pod iniciálou. To už je poměrně výrazná změna lejoutu stránky, která může být v některých případech smrtící. Troufám si říci, že mnohým z Vás se hrůzou začala plést levá a pravá ruka.
V CSS to vypadá takto:
div.prispevek-perex:first-letter,
div.prispevek-perex p:first-child:first-letter
{float:left; font-size:350%; margin: -0.1em 0.2em 0 0;
font-family: serif;}
Protože v gecku 1.7. bylo písmeno příliš dole, posunul jsem ho nahoru záporným marginem. Zdá se tedy, že staré gecko obsahovalo chybu, kterou nové opravilo. Ale co teď s tím. Ohackovat? Jak? Jediné řešení, které mě napadá, je laborovat s line-height, ale nějak nemám sílu, raději se svěřím Vám, p.t. webmistrům.
Ponaučení
Pokud chcete, aby vám iniciála zařezávala horním krajem, musíte se rozhodnout. Buď to bude optimálně vypadat v gecku 1.7, nebo v gecku 1.8. Nebo uděláte kompromis a nebude to optimálně vypadat nikde. Anebo oželíte všechny vymoženosti moderního webu, a pak budete mít web optimalisovaný pro všechny prohlížeče. Kromě JESPRu, který nic z toho zde popisovaného stejně neumí :-)
Odměna. Hustá.
Asi už jste viděli dost blogů. Asi byly některé DOST coooool. Z nich byly některý i hustý. Ale žádný určitě nebyl takle hustý, jako to, co vám ukážu.
Jedna báječná super bloggerka mi poslala skrýnšot, jak vypadá ipsace v IE pro Mac. Teď jsem se na to podival, a opět mě to skolilo. :-)) Musím to sem dát v plné velikosti, protože to prostě stojí za to. Fakt hustý.
ockrolujte si to vodorovně
Tak co, kdo má hustší blog?! Ať vám koně uhánějí tryskem k lepším zítřkům!
Komentáře (15)
Varování:
Budu zde nechávat jen komentáře, které se mi líbí. Demokracie je sen. Nechte si o ní zdát :-)já když tu byla poprvé, říkala jsem si proč sakra má přes celou stránku formulář na komentáře a v pravo minipísmem ty články, který jsem málem přehlídla?
tuye naprosto stupidní probe : http://eldar.cz/myf/pub/try_gecko_first-letter.html
(ještě tam frknu shoty, ať je to yasné). Asi by to chtělo prosít bugzillu : /
Buchtici, tobe to nezalomilo? Dal jsem tam brejk, ale ten je zakazanej :-) A nekdo mi za nej uz dokonce vynadal :-))
matejciku, vertical-align z me nepochopitelneho duvodu funguje pouze u tabulkovych prvku. Hlava mi to nebere, ale ruce musi :-)
Myfe, pekna prace :-) Ale podle toho mi to pripada, ze jsou to vzajemne se kompensujici chyby. Konqueror je asi jedinej dobrej prohlizec, zacnu to optimalisovat pro nej :-)
myfe, ty si přečti 5.12.2 ze specifikace CSS2.1 a uvidíš, že to chování v gecku 1.8 je správně.
roji, ty smaž ty marginy a namísto nich si tam napiš line-height: 0.6em (uhodnuto empiricky jako rozumná hodnota)
co se stalo? .7 se k :first-letteru chová stejně jako ke každému jinému inlinelevel elementu, takže má normálně velký boxík s mezerami nahoře a dole. čili když vyfloatovaně "visí", ještě je tam ta mezera nahoře, takže samotné písmeno je níž než začátek řádky, a musí se nadzvednout záporným marginem.
oproti tomu .8 využívá nabídky css2.1 a udělá si boxík jenom těsně kolem toho písmenka. nejsou tam mezery, a písmeno je samo od sebe tam, kde má být.
proč to line-height řeší? protože .8 si z line-height nic nedělá (boxík je prostě pořád stejně velký jako to písmenko), zatímco .7 to donutí boxík zmenšít (protože už "nepotřebuje" ty mezery nahoře a dole). a zdá se, že 0.6em je tak akorát, aby hranice boxíku byly tvaru písmenka co nejpodobnější.
howgh, a dobrou noc děti
Zkusil jsem "position: relative", ale ani to s inicialou nehne v zadnem pripade. Jedine, co na to ma vliv, je margin, a ten je v kazdem gecku jiny.
Ale treba prave konqueror zobrazuje spis jako novejsi gecko, takze jsem to OPTIMALISOVAL pro nej a gecko 1.8.
...aha, jsem to možná zkoušel v jiným gecku, to by bylo poněkud trapné :e)
http://www.w3.org/TR/CSS21/selector.html#first-letter
na to sem mrkal už posledně ale moc chytrej jsem z toho nebyl. není tam, jakej to může mít / má ve skutečnosti display. je tam jenom jaký vlastnoti to může mít, přičemž jak již bylo zmíněno, line-height by mezi ně patřit měla, ale žádné z mých geck to nedává (prostě jí pro FL nepředefinuju). je tam zajímavá věta o tom, že UA mohou "svévolně" měnít line-height tak aby .. no jak to vidíme v novym gecku.
hm, zbytek submissionu je nenávratně pryč. jo a proformálně jsem aktualizoval ten pokusnej stránek ...
myfe, jde o konkrétně tohle: To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements.
porovnejme s css2: In order to achieve traditional drop caps formatting, user agents may approximate font sizes, for example to align baselines. Also, the glyph outline may be taken into account when formatting.
...vpodstatě nový gecko kopíruje boxíkem tvar písmene, zatímco starý gecko ne.
k updatované testovací stránce - line-height se projeví jen když je ten first-letter nebo span vyfloatovaný. pak se v .8 renderuje span i first-letter přibližně stejně (zatímco v .7 se naopak od sebe odliší)
moje úžasné řešení ovšem nefunguje, staré gecko (ačkoliv by nemělo) tu line-height ignoruje stejně intenzivně jako to nové :e/
poměrně zajímavých výsledků jsem dosáhl s position: absolute, ale v důsledku to asi k ničemu nepovede ... uvidíme
zmiňovaný vertical-align by tomu opravdu pomohl ;e) bohužel ne dost - aby to fungovalo, nesmělo by to floatovat, takže by to nebylo obtékané, a tak dále
Přidání komentáře...
Aktivní styl
Odkazy
