Kāpēc mājaslapa nogriež garumzīmes, un kāpēc fonts parasti nav vainīgs

Sūdzība parasti atnāk kā ekrānuzņēmums: virsrakstā ŽŪRIJA vai PĀRDOŠANA, un burtiem Ž, Ā un Ū zīmes ir daļēji nogrieztas vai pazudušas pavisam. Secinājums gandrīz vienmēr ir viens un tas pats - fonts ir salūzis vai neatbalsta latviešu valodu.

Auditos, ko veicam, fonts gandrīz vienmēr izrādās kārtībā. Vainīga ir viena CSS vērtība, un abus patiesos iemeslus var pārbaudīt bez izstrādātāja, minūtes laikā.

Īsumā

Ja latviešu burtu zīmes mājaslapā ir nogrieztas vai izskatās aizgūtas no cita fonta, fonts visbiežāk nav vainīgs. Patiesais iemesls parasti ir viens no diviem. Vai nu virsraksta rindas augstums ir mazāks par 1, un zīmēm, kas lielajiem burtiem Ā, Č, Ē, Ī, Š, Ū un Ž atrodas virs lielā burta augšmalas, rindā vairs nav vietas. Vai arī lapa ielādē tikai fonta latin apakškopu, kurā nav neviena latviešu burta ar diakritisko zīmi, un pārlūks šos burtus zīmē ar rezerves fontu. Abas pārbaudes ir aprakstītas zemāk.

Kur latviešu burtiem ir zīmes

Latviešu alfabētā ir vienpadsmit burti ar diakritiskajām zīmēm: ā, č, ē, ģ, ī, ķ, ļ, ņ, š, ū un ž. Lielajiem burtiem zīmes izvietojas divējādi:

• virs burta: Ā, Č, Ē, Ī, Š, Ū, Ž - garumzīme vai jumtiņš stāv virs lielā burta augšmalas
• zem burta: Ģ, Ķ, Ļ, Ņ - komats stāv zem pamatlīnijas

Angļu valodā lielajiem burtiem virs to augšmalas nav nekā. Tāpēc maketā, kas veidots un pārbaudīts angliski, virsrakstus var droši sablīvēt, un tāpēc šī kļūda vispār nonāk produkcijā: angļu maketā tai nav kur parādīties.

Mazajam ģ zīme, starp citu, ir virs burta, nevis zem tā - komats ir apgriezts un pacelts augšā, jo burta g astīte jau aizņem vietu apakšā. Tā ir viena no retajām vietām, kur latviešu valoda fonta autoram prasa atsevišķu lēmumu, un vēl viens iemesls fontu pārbaudīt ar visiem vienpadsmit burtiem, ne tikai ar ā un š.

Pirmais iemesls: rindas augstums zem 1

Lielo virsrakstu mode ir blīva: liels teksts, lielie burti, rindas cieši kopā. CSS valodā tas ir line-height ar vērtību zem 1 - rinda ir zemāka par pašiem burtiem.

Angliski tas strādā droši. Latviski tajā pašā rindā Ž, Ū vai Ā zīme paliek ārpus atvēlētās vietas: vairāku rindu virsrakstā tā uzkāpj iepriekšējai rindai virsū, bet vietās, kur konteiners vai efekts lieko apgriež, tā pazūd pavisam. Ekrānā tas izskatās tā, it kā fonts būtu bojāts tieši latviešu burtiem. Fonts ir vesels - tam vienkārši nav atstāta vieta.

Tipisks gadījums izskatās šādi: visiem lielajiem virsrakstiem ir uzstādīts line-height: .93, angliskajās lapās viss izskatās nevainojami, un latviskajās Ž un Ū zīmes ir nogrieztas. Risinājums, ko lietojam mēs, ir viens mainīgais, kas papildu vietu dod tikai latviskajām lapām:

:root { --lh-diacritic: 0; }
:root:lang(lv) { --lh-diacritic: .12; }

h1 { line-height: calc(.93 + var(--lh-diacritic)); }

Mainīgo pieskaita, nevis aizstāj ar vienu kopīgu vērtību: katrs virsraksts patur savu noregulējumu, angliskās lapas paliek tieši tādas, kādas dizainers tās noslīpēja, un valodas atšķirība dzīvo vienā rindā.

Pārbaude. Atveriet lapu pārlūkā, ar labo peles pogu uz bojātā virsraksta izvēlieties Inspect un uz brīdi iestatiet line-height uz 1.1. Ja zīmes atgriežas, iemesls ir atrasts, un fonts ar to nav saistīts.

Otrais iemesls: ielādēta tikai latin apakškopa

Fontu failus parasti dala apakškopās pa rakstībām, lai lapa neielādē burtus, ko tā nelieto. Google Fonts to dara automātiski, un robeža latviešu valodai ir neērta: neviens latviešu burts ar diakritisko zīmi nav apakškopā latin. Visi vienpadsmit ir apakškopā latin-ext.

Pārbaudījām Google Fonts CSS atbildi 2026. gada 18. augustā: apakškopa latin sākas ar diapazonu U+0000-00FF, bet latviešu diakritiskie burti dzīvo no U+0100 (Ā) līdz U+017E (ž), un viss šis intervāls ir latin-ext diapazonā U+0100-02BA.

Ja tēma, spraudnis vai ar roku rakstīts @font-face ielādē tikai latin, tālāk notiek viens no diviem. Ja latin-ext fails ir deklarēts, pārlūks to lejupielādē kā otru failu, un teksts ielādes brīdī pārzīmējas. Ja latin-ext nav deklarēts vispār, ā, š un ž tiek zīmēti ar rezerves fontu: katram diakritiskajam burtam ir cits platums un cits svars, un teksts izskatās nevienmērīgs tieši latviešu burtos - tas pats “aizgūtā burta” izskats, pēc kura sliktu latviešu atbalstu pazīst jau fonta izvēles brīdī.

Tas pats attiecas uz fontiem, ko glabājat savā vietnē. Mēs fontus neielādējam no Google serveriem, bet glabājam paši, un apakškopu dalījums tur ir tieši tāds pats: ja latin-ext faila sarakstā nav, latviešu burtiem fonta nav. Kurus fontus vispār izvēlēties un ar kādu frāzi tos pārbaudīt, esam aprakstījuši atsevišķā rakstā par latviešu fontiem.

Trīs pārbaudes, pirms vainojat fontu

1. Rindas augstums. DevTools, uzklikšķiniet uz bojātā virsraksta un apskatiet line-height. Vērtība zem 1 kopā ar lielajiem burtiem latviski nozīmē nogrieztas zīmes. Iestatiet uz brīdi 1.1 un skatieties, vai zīmes atgriežas.
2. Apakškopa. DevTools cilnē Network filtrējiet pēc “font” un pārlādējiet lapu. Ja ielādējas tikai latin fails, bet lapā ir latviešu teksts, diakritiskie burti nāk no rezerves fonta vai no otras, vēlākas ielādes.
3. Pats fonts. Ierakstiet lapā frāzi ar visiem vienpadsmit burtiem, piemēram, to pašu, ko lietojam fontu pārbaudei: “Ēģiptē žēlsirdīgs ķēniņš čukstēja āķīgu šļūdoni.” Ja kāds burts izskatās citāds nekā pārējie arī tad, kad pirmās divas pārbaudes ir tīras, tikai tad jautājums ir par pašu fontu.

Secība nav nejauša. Pirmās divas pārbaudes atrod iemeslu lielākajā daļā gadījumu, un abos gadījumos labojums ir pāris CSS rindu - fonts nav jāmaina. Fonta maiņa ir pēdējā atbilde, nevis pirmā.

Kāpēc to ir vērts izlabot

Nogriezta garumzīme nav tikai estētika. Tā ir redzama tieši tajos burtos, kas tekstu dara latvisku, un lasītājs to nolasa kā paviršību, pat ja neapzināti. Vietnei, kas pārdod Latvijas tirgū, virsraksts ar nogrieztu Ū ir tas pats, kas izkārtne ar izdegušu burtu: viss strādā, bet neviens tam vairs īsti netic.

Turklāt abi labojumi ir lēti. Rindas augstuma mainīgais ir dažas CSS rindas, apakškopas labojums ir viena faila pievienošana sarakstam. Nav jāmaina ne fonts, ne dizains, ne platforma.

Noderīgi tālāk

• Skaisti latviešu fonti: Google Fonts, kas atbalsta garumzīmes - pārbaudītu fontu saraksts un frāze, ar kuru pārbaudīt jebkuru citu.
• WordPress optimizācija: kāpēc zaļš PageSpeed rezultāts nenozīmē ātru mājaslapu - fontu ielāde ir arī ātruma jautājums, un latin-ext tur parādās vēlreiz.

Būvējam mājaslapas, kas latviski izskatās tikpat labi kā angliski, līdz pēdējai garumzīmei. Tieši to mēs darām kopš 2008. gada.