css vertical rhythm fejfájás
próbálok összehozni egy vertikális ritmust, de apró problémába ütköztem:
van a köv markup:css reset után (eric meyer féle), beállítok egy alap line-height:15px-et, font-size:12px-szel, de a <small>-tag-nek csak font-sze: 10px-et adok, viszont ez az utána következő sorokat eltolja 1px-szel valamiért.
a css kis php-val támogatott:próbáltam 20px-es line height-et adni, ugyanez.
chrome és ff is csinálja, gondolom ie is, azt már nem is néztem (win7en vagyok).
ha az alap fontméretet változtatom, a csúszás marad, arányosan változik, ugyanez igaz a small tagnál a szorzóra is, a csúszás ehhez is arányos :/
ha a small tag fontmérete pont ugyanannyi mint az alap, akkor minden ok.
kép chromeból (a háttérkép a grid-et jelöli.): http://i43.tinypic.com/2k0jtf.png
valaki esetleg tudja hol, mit rontok el, illetve mi okozza jelenséget?
a stong,em,q-tagok nem játszanak, kivettem-visszatettem őket, ugyanez...
köszönöm!
ps. ha a <small>-lal egy blokk elemet veszek körbe (pl blockquote) akkor minden ok, nem csúszik, csak inline környezetben.
■ van a köv markup:
<p>
<strong>Strong.</strong>
<em>Em.</em>
<q>Q.</q>
<small>Small.</small>
Jujubes gingerbread donut jelly-o (...)
</p>a css kis php-val támogatott:
p
{
line-height: 15px; // <?=LINE?>px;
font-size: 12px; // <?=FONT?>px
}
(...)
small
{
line-height: 15px; // <?=LINE?>px
font-size: 10px; // <?=round(FONT*0.8)?>px;
}chrome és ff is csinálja, gondolom ie is, azt már nem is néztem (win7en vagyok).
ha az alap fontméretet változtatom, a csúszás marad, arányosan változik, ugyanez igaz a small tagnál a szorzóra is, a csúszás ehhez is arányos :/
ha a small tag fontmérete pont ugyanannyi mint az alap, akkor minden ok.
kép chromeból (a háttérkép a grid-et jelöli.): http://i43.tinypic.com/2k0jtf.png
valaki esetleg tudja hol, mit rontok el, illetve mi okozza jelenséget?
a stong,em,q-tagok nem játszanak, kivettem-visszatettem őket, ugyanez...
köszönöm!
ps. ha a <small>-lal egy blokk elemet veszek körbe (pl blockquote) akkor minden ok, nem csúszik, csak inline környezetben.
Megjelenítési elemek
A megjelölt szöveg kisebb vagy nagyobb lesz — ezt inkább CSS-ben valósítsd meg.
Tehát pl. <span class="small"> megoldja a problémád.
mellé.
....
én úgy tudtam h a <b> a megjelenítési elem, és a strong jelöli a nyomatékosított, erős dolgokat (pl képernyőfelolvasónak), amit vizuálisan is illik kiemelni.
most akkor <b> vagy <strong>, <em> vagy <i>? .... :/
átírod nekem a tinymce-t hogy jó outputot generáljon?
de ez részletkérdés.
szerk: bocs, de kiidegeltem magam evvel az elmúlt 2órában..
Akkor passz
Igen, a <b> is megjelenítési elem. És még: font face="…" size="…" - s és strike - u - tt. Az alcímeket idéztem a fentebb említett Nagy Gusztáv könyvből.
Semmi gond, csak próbáld minél nyugodtabban újra átgondolni a problémát.
(Hülye kérdés, de feltétlenül szükséges a soron belüli kisebb betű? Én már a px-ben megadott betűmérettől is idegenkedem, bár ez itt csak példa.)
tinymce, type
azért van, mert ez az egyik legjobban használható szövegszerkesztő, sok sok pluginnel, és nem mellékesen, az egységsugarú ügyfél is tudja használni egyből h tartalmat szerkesszen a saját weboldalán.
a saját implementációm contentEditable alapon a nyomába sem ér (nem beszélve arról h minden böngésző más tageket illeszt, van aki spanel-chrome, van aki strongozik-ff, és van aki <B>-zik, nagybetűvel-ie.
(bbcode feldolgozót én is olyanra írtam h span-eket generál ;) )
type:
itt egy cikk témában, idézem a legutolsó alcímet: "ne féljetek a pixelektől"
http://www.alistapart.com/articles/settingtypeontheweb
pixelekkel sokkal könnyebb, mivel a line-height-ek/font size-k, em / % -ban nem mindig tiszta h mihez képest relatívek, főleg beágyazott elemeknél. sok fejfájást, kisérletezést megspórolsz vele ha abszolút méretet adsz meg, szvsz.
vízszintes tipográfiai rácsot használok már egy ideje, gondoltam megpróbálkozom egy függőlegessel is, ami jelen állapotában jó, használható is, csak ez az apr gond van vele, hogy tökéletes lehessen. maximalista vok, ez van :D
gyanítom h valami renderelési sajátosság lesz, kíváncsi lennék pl linuxon tapasztalt-e valaki hasonlót, illetve tud-e olyan css-trükkről amivel ez kiküszöbölhető.
(pl inline-block + overflow: hiddent próbáltam, de fix height-et nem akarok adni neki, elv így mennie kéne, line-height -tel)
Véleményem
Aki ki is tudja használni, az nem áll messze a HTML-től sem. És itt nem "két eszközzel formázó" (SPACE és ENTER) Júzerekre gondolok. De: amit kér a T. Megrendelő...
"ne féljetek a pixelektől":
Nem is félek, csak rengeteg embert ismerek, akik:
- Túl aprónak találják a legtöbb általuk látogatott honlap betűit;
- IE7-8-at használnak;
- Legfeljebb annyit tudnak böngészőjükről, hogy van ilyen menü: "Nézet/Szövegméret/Legnagyobb". És nem találják a - többnyire igen kicsi kép formátumú - "gyengénlátóknak" gombot, mert ahány honlap, annyiféle.
Szóval semmi bajom amúgy a px-el, de betűre nem használom, ha csak tehetem (eddig tehettem).
Ezek véleményjellegű dolgok, nem annyira sarkalatosak.
wáááá, meglett
akkor is ha önmagában áll az elem (azaz tartja a ritmust)
most jön az ie.. már látom fincsi lesz, össze vissza vannak az ul-ek előtt a bulletek, ie9ben is, széttolják a ritmust (circle, disc, ok, de a square... :/)
pontosítok
inline elemeknél nem illik a line-height-et variálni:
Részletesebben?
Lehet erről olvasni is valahol?