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 ẞ. Príklad: Nahradenie znaku ß za entitu ẞ.
1
2
3
var target =document.getElementById("final");
var source =document.getElementById("text").innerText;
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%;. 28.3.2016 (aktualizované 31.3.2016), Matej LednárKategória: ProgramovanieProgramovanie,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.
