×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest