met CSS de baseline van tekst vastzetten

[HunterPro]

Hoi

ik zit weer met wat lastigs in me kop, maar here goes

eerst even een inleiding in de wondere wereld van de fonts. Fonts hebben allerlei eigenschappen. Baseline, x-height, ascenders, descenders, etc. Hierom heb ik ff van adobe het volgende plaatje ter illustratie geleend.



wat ik, zoals de titel al zegt, wil, is van tekst (bijvoorbeeld in een div) de plaats van de baseline kunnen bepalen. Want als ik nu een div aanmaak, moet daar van de browser alle tekst, inclusief ascenders en descenders inzitten. Niks mag uitsteken.

Het zou voor mij (en wellicht voor anderen die de titels van pagina's netjes willen uitlijnen met andere elementen op de pagina) handig zijn om dus baseline-georienteerd tekst neer te kunnen plempen. Maar ik kan er geen enkele CSS-property voor vinden; wat dus resulteert in het plaatsen van de tekst met behulp van een zelfgemaakt hulplijntje en trial and error.

Zijn hier workarounds in enige vorm voor, of heb ik een CSS property helemaal over het hoofd gezien? Wie helpt me?

[crisp]

Had je deze al doorgelezen?

[RM-rf]

eigenlijk is die propertie line-height; maar gebruik daarvan kan negatieve gevolgen hebben als je titel over meerdere regels gaat verlopen.

voor UA's geldt met CSS dat de line-height bepaald wordt door de line-height van de grootste font, of van een element (mozilla kent inline images een extra line-height toe) je kunt eventueel een leeg pixel-gifje gebruiken voor positionering van de eerste regel.

anders is het eventueel mogelijk om met de speudo-class :first-line te werken en deze een line-height toe te kennen

[Grom]

Wellicht dat ik je niet goed begrijp maar:

Vertical Alignment
--------------------------------------------------------------------------------
Syntax: vertical-align: <value>

Possible Values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

Initial Value: baseline

Applies to: Inline elements

Inherited: No


<div class="div1">
<font class="font1">font1</font>
<font class="font2">font2</font>
<font class="font3">font3</font>
</div>