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

Я борюсь с различными способами, которыми браузеры обрабатывают переносы для выравниваемого текста от строки к строке. У меня есть следующие настройки 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, но я не нашел файлов с примерами для включения и/или редактирования. В идеале, если этот параметр поддерживается основными браузерами, я бы включил его и хотел бы отредактировать его для неанглийских слов, а также отредактировать его значения по умолчанию.

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


css hyphenation
person Tom    schedule 05.11.2015    source источник
comment
Кажется, опция @hyphenate-resource не вошла в окончательный стандарт CSS3. Возможно, поэтому нет доступных примеров.   -  person Hans Dash    schedule 29.03.2018

Ответы (1)


arrow_upward
1
arrow_downward

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

Метод 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>

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

person Sam    schedule 14.11.2015