Proč nefunguje line-height?

Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?

<div>
    Lorem ipsum dolor sit amet,
    <span>
        consectetur adipiscing elit. ...
    </span>
</div>
div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

Vy ale samozřejmě očekáváte tenhle vzhled:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

 

Problém je v tom, že ve specifikaci HTML5 je, že inline prvky nemohou mít vlastní line-height a musí ji vždy zdědit od nadřazeného blokového prvky. Oprava je tedy jednoduchá – stačí příslušný prvek změnit na blokový nebo ho blokem obalit:

div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;

    /* umožní použít line-height: */
    display: block;
}

Navíc line-height zadaná s jednotkami je vždy odvozena od font-size prvku, u kterého je definována. Pokud tedy v kontejneru nastavíte line-height (ať už jako EM nebo procenta), všichni potomci budou mít stejnou line-height nezávisle na vlastní velikosti písma (tedy za předpokladu, že nemají vlastní line-height nebo jsou to inline prvky).

/* line-height vždy 24px */
.container1 {
    font-size: 20px; line-height: 1.2EM;
}
.container2 {
    font-size: 20px; line-height: 120%;
}
.container1 div {
    font-size: 12px;
}
.container2 span {
    font-size: 10px; line-height: 1.2EM;
}

Pokud naopak chcete, aby byla line-height pro každý prvek vypočtena podle jeho font-size, je potřeba zadat line-height jako poměr:

.container {
    font-size: 20px;
    line-height: 1.2;
 /* line-height: 24px */
}

.container div.x {
    font-size: 12px;
 /* line-height: 14.4px */
}

.container div.y {
    font-size: 10px;
 /* line-height: 12px */
}

Samozřejmě ještě existuje speciální hodnota normal, která odpovídá přibližně poměru 1.38, což je doporučená výška řádku pro bezproblémové zobrazení všech znaků (např. české háčky a čárky). Pokud použijete menší výšku, může se stát tohle:

yyyyyyyyyyyyyyyyyyyyy
ŘŘŘŘŘŘŘŘŘŘŘŘŘŘŘ

 
Správně čitelný text samozřejmě vypadá takto:

yyyyyyyyyyyyyyyyyyyyy
ŘŘŘŘŘŘŘŘŘŘŘŘŘŘŘ

 

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *