-3

I have a problem with my website on the turkey version. Something is wrong with ligatures. Exactly I have some words in English for example "SHIPPING" and if I add style CSS text-transform: uppercase; to this word above each letter "I" is doing an unnecessary dot. (something is mixings with turkey language). I use the font "Roboto".

I tried using a style font-variant-ligatures: none; and unfortunately it does not work. I noticed if i change from to all is ok, but it's desirable solution. Does someone have another solution?

screen tr: http://imgurl.pl/img/tr_5d02343c5e964.png

screen en: http://imgurl.pl/img/en_5d02343c5e7cf.png

Joykal Infotech
  • 1,840
  • 3
  • 9
  • 17
dominik
  • 1

2 Answers2

1

It's a matter of language: If your language is Turkish then you have two distinct i characters (i and ı) which also have different capital versions (İ and I). If your website is turkish then the dotted I will be used as a capital letter. You would have to set the language of your element to English manually with lang attribute. Yu cannot assume your browser knows the language of the text by heart.

See also Wikipedia article on this: https://en.wikipedia.org/wiki/Dotted_and_dotless_I

div {
  font-size: 40px;
  font-family: sans-serif;
  text-transform: uppercase;
}
<html lang="tr">
<div>TR: shipping</div>
<div lang="en">EN: shipping</div>
</html>

BTW: It has nothing to do with ligatures.

yunzen
  • 32,854
  • 11
  • 73
  • 106
0

font-language-override isn't very widely implemented yet, but that is a css-only solution that may work some day. Firefox claims to support it, but I couldn't get it to work with the example yunzen provided with font-language-override: ENG; added. There's more information on the feature here.

Jack Humbert
  • 129
  • 2
  • 9