如何优化连字处理

Question

如何优化连字处理

4

我正在烦恼浏览器在文本两行之间对齐时处理连字号的不同方式。以下是我的文本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选项，但我没有找到包含和/或编辑的示例文件。理想情况下，如果该选项在主要浏览器中得到支持，我将包含它，并希望编辑非英语单词以及编辑其默认值。

最佳方法是什么？

- Tom

1

似乎"@hyphenate-resource"选项没有被纳入最终的CSS3标准。这可能是为什么没有可用的示例的原因。 - Hans Dash

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sam · Accepted Answer

我正在为浏览器处理文本两端对齐时的连字符化方式而苦恼。 方法1. CSS
请参见this link以获取仅使用CSS的解决方案。

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

你已经尝试过这个方法，并发现无论浏览器版本如何，Chrome都没有任何支持，并且在不同浏览器之间结果的一致性缺乏。你可能会想是否有更一致的方式来连字符化单词，适用于所有主要浏览器？

方法2. Javascript Hyphenator.js是一个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>

注意：请注意我自定义了类并将其缩短为连字符，而不是默认的断字符