×
Vytvárame riešenia

Ako vyriešiť problém so zobrazovaním znaku ß

V rámci front-end developmentu sa môže programátor stretnúť s jedným zaujímavým javom, ktorým je znak ß. Ten sa totiž pri transformovaní cez JavaScript alebo CSS zmení na písmena ss.
Vyriešiť tento problém je možné viacerými spôsobmi. V tomto článku predstavím dva spôsoby, no nemusia byť vhodné napríklad pri encodovanom texte. Ako základ použijem nasledujúci markup.
Príklad: Zápis do elementu <body>.
1
2
<div id="text">ßtestß ßtestß ßtestß</div>
<div id="final"></div>
Riešenia budem demonštrovať na vlastnosti font-variant: small-caps;.
Príklad: Zápis do sekcie CSS.
1
2
3
div {
font-variant: small-caps;
}
Ako prvé riešenie predstavím nahradenie znaku ß za entitu &#x1e9e;.
Príklad: Nahradenie znaku ß za entitu &#x1e9e;.
1
2
3
var target = document.getElementById("final");
var source = document.getElementById("text").innerText;
target.innerHTML = source.replace(/ß/g, "&amp;amp;#x1e9e;");
Ako vidieť, toto riešenie nie je úplne ideálne, no je najjednoduchšie. Druhé riešenie je už o niečo sofistikovanejšie a odstraňuje problém s veľkosťou písmena ß.
Príklad: Manuálna transformácia znaku ß.
1
2
3
4
var target = document.getElementById("final");
var source = document.getElementById("text").innerText;
var text = source.replace(/ß/g, "<span class='ss'>ß</span>")
target.innerHTML = text;
Príklad: Zápis do sekcie CSS.
1
2
3
4
5
6
7
div {
font-variant: small-caps;
}
.ss {
font-size: 70%;
font-variant: normal;
}
V tomto riešení obaľujem znak ß do elementu <span> a pridávam CSS triedu, ktorá zabezpečí, aby znak ß splynul s ostatnými písmenami.

Záver

Pri problémoch s veľkosťou písmena ß je potrebné zmeniť veľkosť font-size: 70%;.


Programovanie,CSS,ß,small-caps,text-transform,uppercase,font-variant,JavaScript
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších