CODEWITHSUNDEEP
htmlcssuser-interfacefontsarabic
Lance Pollard
Lance Pollard

Reputation: 79188

Why Arabic Noto font (or other Arabic fonts) are rendering incorrectly in HTML / CSS?

I am rendering Arabic text using the Google Noto Sans Serif Font, and it looks like this:

enter image description here

Notice how the alignment is off by a lot in some places.

enter image description here

My HTML document is very simple, it's essentially this:

<html>
  <head>
    <meta charset="utf-8">
    <style>
      @font-face {
        font-family: Noto;
        src: url(./arabic.ttf);
      }

      body {
        font-family: "Noto";
      }

      .line {
        white-space: pre;
      }
    </style>
  </head>
  <body dir='rtl'>
    the arabic text...
  </body>
</html>

All it does is add the Google Noto Font to the body and then there's a bunch of <div class='line'>arabic text...</div> lines.

However, in the picture above, there are two what feel like glaring problems.

First is, the text does not seem to be visually aligned properly. It feels jumbled and jagged rather than having a clear baseline. Some parts the main horizontal stretch of the word or characters is even way above or way below the "average" placement of the horizontal baseline.

Second, I am not skilled at Arabic atm, but it appears some of the characters are shifted slightly so as not to connect cursively in a nice clean way, like the rendering algorithm is messing up in certain situations.

Am I just misunderstanding how this is supposed to look, or are these visual problems actually there? If these are defects, how do I fix it and make the Arabic text cleaner and more horizontally aligned, through CSS or otherwise.

If it's at all relevant, I am using wkhtmltopdf to generate a PDF from the HTML, which is what that image is.

Upvotes: 2

Views: 1231

Answers (1)

alijsh
alijsh

Reputation: 860

I think the problem is in conversion (wkhtmltopdf) and not in CSS. Why don't you use a browser like Chrome to convert your HTML into PDF? It works better for Arabic texts. Arabic texts usually need a higher line-height than normal e.g. 1.6 

body {
  line-height: 1.6;
}

On a side note, I'd recommend Vazir font. It renders texts containing diacritics optimally.

Upvotes: 1

Related Questions