Odsazení prvního řádku text-indent

První řádek
tohoto odstavce
bude více odsazen zleva.

Záporná hodnota zajistí naopak předsazení prvního řádku (v ukázce je přidán padding, aby obsah nevylezl z obalu):

První řádek
tohoto odstavce
bude více předsazen zleva.

Zápis

p {
  text-indent: 1em;
}

Hodnotu odsazení/předsazení jde zadat v běžných délkových jednotkách nebo v procentech. Výchozí hodnota je 0 – nic se neodsazuje.

Další hodnoty

Specifikace uvádí další hodnoty pro text-indent, které ale zatím nikde nefungují:

  • each-line – odsadí i první řádek po řádkovém zlomu
  • hanging – invertuje obsah, co se má odsadit/předsadit

Využití

U textů v českých knihách nebo novinách bývá zvykem, že se odstavec tvoří odsazením začátku řádku místo svislým odstupem, jak je běžné na webu.

Příklad odstavců v novinách

Znázorňovat odstavec odsazením prvního řádku místo horního a dolního odsazení celého odstavce se hodí zejména v případech, kdy pro vertikální odsazení není dost místa – to se na rozdíl od novin a knih webu moc netýká – vyšší webová stránka další papír nestojí.

Skrývání textu

V CSS kódu některých webových kodérů je možné vidět konstrukce typu:

.skryty {
  text-indent: -9999px;
}

Používalo se to ke skrytí textu pří používání obrázkových nadpisů a tlačítek:

Nejedná se o moc dobré řešení, protože bez načtených obrázků není text vidět. K podobnému výsledku tak jde dojít i elegantněji pomocí aria-* atributům.

Selektor ::first-line

Docílit dalších úprav prvního řádku kromě odsazení (přes text-indent) jde docílit CSS selektorem ::first-line, který zaměří pouze první řádek.

První řádek
tohoto odstavce
má jinou barvu.

Pomocí tohoto selektoru ale zatím nejde v prohlížečích třeba zrovna přidat odsazení. Pseudo-element ::first-line podporuje jen vlastnosti měnící písmo, styl textu, barvu a pozadí:

Při použití pouze jedné dvojtečky (:first-line) má perfektní podporu i ve starých prohlížečích.

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře