CODEWITHSUNDEEP
htmlcsstypography
pwwolff
pwwolff

Reputation: 626

HTML and Typography - Acute Accent (+0301), Cyrillic , and HTML

I am building an App for working with Russian linguistic data. It's a web-app (MongoDB + Node).

I'm having the following problem: I use the acute accent to indicate a stressed vowel. For some reason, this looks strange when rendered by my browser.

Here is how the text is rendered in my browser (Chrome):

enter image description here

As you can see, it seems as though the letters of each word containing an accent are larger after the accent (ie. существуЮТ). I have this issue specifically when using the font PT Serif, which I particularly like for displaying the cyrillic alphabet.

CSS:

#TextContainer {
  font-family: 'PT Serif', serif;
  font-size: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

Why does this happen with this font? Is it possible to fix this using CSS or do I have to use a different font?

Upvotes: 1

Views: 299

Answers (2)

Olafusi Emmanuel
Olafusi Emmanuel

Reputation: 40

Maybe it is the font-size try using this 

  font-family: Sans-Serif, 10px; 
  text-align: justify;
  text-justify: inter-word;

Upvotes: 1

pwwolff
pwwolff

Reputation: 626

Just figured it out myself so here it is for posterity:

It's not an issue with this particular font, it seems to be related to Sans fonts vs Sans Serif fonts - Sans Serif fonts display the accents properly, whereas Serif fonts don't. I just didn't test a wide enough variety of fonts. Will use "PT Sans" instead of "PT Serif".

Upvotes: 1

Related Questions