Почему шрифт Arabic Noto (или другие арабские шрифты) отображается неправильно в HTML / CSS? - PullRequest
Новая
       92

Почему шрифт Arabic Noto (или другие арабские шрифты) отображается неправильно в HTML / CSS?

1 голос
/ 26 октября 2019

Я отображаю арабский текст с использованием шрифта Google Noto Sans Serif , и он выглядит следующим образом:

enter image description here

Уведомлениекак выравнивание отключено в некоторых местах .

enter image description here

Мой HTML-документ очень прост, по сути это так:

<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>

Все, что он делает, это добавляет шрифт Google Noto к body, а затем есть набор <div class='line'>arabic text...</div> строк.

Однако вНа рисунке выше есть две проблемы, которые кажутся явными .

Во-первых, текст не выглядит визуально выровненным должным образом. Чувствуется перемешанный и зубчатый вместо того, чтобы иметь четкую базовую линию. В некоторых частях основное горизонтальное растяжение слова или символов даже на намного выше или намного ниже"среднего" положения горизонтальной базовой линии.

Во-вторых, яне разбираюсь в арабском атм, но кажется, что некоторые символы немного смещены, чтобы не соединяться курсивом аккуратно и аккуратно, как алгоритм рендеринга не работает в определенных ситуациях.

Я просто неправильно понимаю, какэто должно выглядеть, или эти визуальные проблемы на самом деле есть? Если это дефекты, как я могу это исправить и сделать арабский текст более чистым и выровненным по горизонтали, с помощью CSS или иным образом.

Если это вообще важно, я использую wkhtmltopdf для генерации PDF из HTML,что это за изображение.

1 Ответ

0 голосов
/ 10 ноября 2019

Я думаю, что проблема в конвертации (wkhtmltopdf), а не в CSS. Почему бы вам не использовать браузер, такой как Chrome, чтобы конвертировать HTML в PDF? Это работает лучше для арабских текстов. Арабские тексты обычно нуждаются в более высокой высоте строки, чем обычно, например, 1.6 

body {
  line-height: 1.6;
}

На заметку, я бы рекомендовал шрифт Vazir . Он оптимально отображает тексты, содержащие диакритические знаки.

...