Как оптимизировать переносы

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

text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Моя настройка языка en, Одно слово, которое обрабатывается непоследовательно - это "выражение":

Chrome: no hyphenation
Firefox: express-ing [correct!]
IE11: express-ing [correct!]
Safari: express-ing [correct!]

Как ни странно, Safari умеет переносить немецкое слово "Gesamtkunstwerk":

Chrome: no hyphenation
Firefox: no hyphenation
IE11: no hyphenation
Safari: Gesamtkunst-werk [correct!]

Я понятия не имею, как Safari чувствует, что слово немецкое и переносит его. Есть идеи?

Спецификация CSS3 указывает на hyphenate-resource вариант, но я не нашел примеры файлов для включения и / или редактирования. В идеале, если этот параметр поддерживается в основных браузерах, я бы включил его и хотел бы отредактировать его для неанглийских слов, а также отредактировать его значения по умолчанию.

Каков наилучший подход?

Источник

1 ответ

Я борюсь с различными способами, которыми браузеры обрабатывают переносы для оправданного текста от строки к строке.

Способ 1. CSS
Смотрите эту ссылку для решения только для CSS.

article p{
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Вы уже попробовали это и обнаружили, что Chrome абсолютно не поддерживается, независимо от версии браузера, и вы видели отсутствие согласованности результатов в разных браузерах. И, возможно, интересно, есть ли более последовательный способ дефиса слов, который хорошо работает во всех основных браузерах?

Способ 2. Javascript
Смотрите эту ссылку, потому что есть решение, которое работает во всех основных браузерах. И... с еще большей языковой поддержкой, чем большинство браузеров на данный момент. Сначала выберите один (или несколько) языков, которые вам нужны для поддержки поддержки вашего сайта, затем следуйте инструкциям и настройте собственный скрипт, а затем, наконец, нажмите "Создать!" который создаст минимизированный JavaScript для вас. Вы копируете это в свой файл hyphenate.js и, наконец, не забудьте определить класс в абзацах, которые хотите использовать в качестве переноса.

<head>
  <script src="hyphenate.js" type="text/javascript"></script>
</head>

<body>
  <article lang="nl" class="hyphen">  // in this case Dutch >> NL
    <p>.......</P?
  </article>
</body>

Примечание: обратите внимание, что я настроил класс и сократил его до дефиса по умолчанию

Источник
Другие вопросы по тегам