Moderni CSS reset za uredniju tipografiju na webu

CSS danas rješava tipografske sitnice koje su se prije popravljale skriptama ili ručnim podešavanjem. To su usamljena riječ na kraju odlomka, naslov koji se nespretno lomi i prevelik naslov u uskom stupcu. CSS-Tricks je objavio zbirku takvih pravila pod nazivom tidy-typography.css. Ovdje objašnjavam koji su dijelovi korisni za običnu stranicu, poput weba kongresa, portfolija ili stranice male tvrtke, a koje je pametnije zasad preskočiti.

Što ulazi u moderni reset

Klasični reset izjednačava zadane stilove preglednika. Tipografski reset ide korak dalje i postavlja razumne zadane vrijednosti za prijelom redaka, rastavljanje riječi, veličinu slova i mogućnosti samog fonta.

Datoteku možete preuzeti cijelu ili iz nje uzeti samo pravilo koje rješava vaš konkretan problem. Preglednik pravila koja ne podržava jednostavno ignorira. To vam pomaže samo ako stranica i bez tih pravila izgleda pristojno.

Prijelom redaka bez JavaScripta

Prema MDN-u, svojstvo text-wrap-style (skraćeno text-wrap) radi u aktualnim preglednicima od listopada 2024. Korisne su tri vrijednosti:

Lijevo zadani prijelom s usamljenom riječi, desno uravnoteženi naslov i odlomak bez kratkog zadnjeg retka. · Ilustracija: generirano AI-jem

• balance za naslove, citate i opise slika. Tekst se ravnomjerno raspoređuje po redcima, pa naslov ne završava jednom kratkom riječju. Primjenjuje se samo na kratke blokove (u Chromiumu do šest redaka, u Firefoxu do deset), pa je utjecaj na brzinu zanemariv.
• pretty za odlomke. Sprječava da zadnja riječ ostane sama u retku, ali algoritam je sporiji, pa ga koristite samo za tekst.
• stable za sadržaj koji korisnik uređuje, da se odlomak ne preslaguje pri svakoj novoj riječi.

Širinu odlomka vrijedi ograničiti na oko 65 znakova (max-width: 65ch). Jedan čitatelj CSS-Tricksa predlaže da ograničenje stavite na cijeli popis umjesto na pojedine stavke, kako stavke ne bi stršale.

Rastavljanje riječi traži točan jezik

Pravilo hyphens: auto dopušta pregledniku da sam rastavlja riječi na kraju retka. Široko je podržano od rujna 2023. Radi samo ako dokument ima ispravan atribut jezika (za hrvatski <html lang="hr">) i ako preglednik ima rječnik za taj jezik.

Dodatna svojstva, poput hyphenate-limit-chars i hyphenate-limit-lines, sprječavaju prekratke ulomke i niz rastavljenih redaka zaredom. Prema komentarima čitatelja, dio njih zasad radi uglavnom u Safariju.

Naslove i kôd ostavite na hyphens: manual. Rastavljen naslov izgleda kao pogreška, a rastavljen kôd može promijeniti značenje. Mjesto prijeloma možete ručno odrediti mekom crticom ­.

Veličina slova prema stupcu

Fluidna veličina slova koja se računa prema širini ekrana (vw) ne zna koliko je širok sam element. Zato naslov u bočnom stupcu raste kao da zauzima cijeli ekran.

Rješenje je da omotač proglasite spremnikom (container-type: inline-size) i u funkciji clamp() umjesto vw koristite jedinicu cqi, koja se računa prema širini spremnika. Isti se naslov tada prilagođava i članku i uskom stupcu.

Fontovi bez izmišljenog bolda

Pravilo font-synthesis: none sprječava preglednik da sam podeblja ili nakosi font koji nema takav rez. MDN objašnjava zašto je to važno: pravi kurziv i bold često imaju drukčije oblike slova.

Varijabilni fontovi sve debljine i širine drže u jednoj datoteci. Kod njih font-optical-sizing: auto prilagođava debljinu poteza veličini teksta. Za tablice s brojkama koristite font-variant-numeric: tabular-nums, pa će se znamenke složiti u uredne stupce.

Gdje treba oprez

Komentari ispod izvornog članka podsjećaju da je ovo skup osobnih izbora, a ne neutralan reset. Kritiziraju se, među ostalim, -webkit-font-smoothing, text-rendering: optimizeLegibility i prisilno uključeno kerniranje. Kritizira se i text-box-trim, koji je slabo podržan i može poremetiti raspored u preglednicima koji ga ne poznaju. Viseća interpunkcija zasad radi samo u Safariju.

Kod znanstvenih tekstova pazite na indekse i eksponente. Ako uključite font-variant-position, a uz to imate font-synthesis: none, rezervni font možda neće pravilno prikazati indekse i eksponente.

Ukratko

• Uzmite samo pravila koja rješavaju stvaran problem.
• balance koristite za naslove, a pretty i ograničenu širinu za odlomke.
• Automatsko rastavljanje riječi radi samo uz ispravan atribut lang.
• Za naslove u stupcima koristite jedinicu cqi umjesto vw.
• Eksperimentalna svojstva prije objave provjerite u nekoliko preglednika.

Naslovna: generirano AI-jem