如何优化连字 [英] How to optimize hyphenation

查看:47
本文介绍了如何优化连字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在为浏览器处理行与行之间合理文本的连字符的不同方式而苦苦挣扎.我的文字具有以下CSS设置:

I'm struggling with the different ways browsers handle hyphenation for justified text from line to line. I have the following css settings for my text:

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

我的语言设置为 en .不一致处理的一个词是表达":

My language setting is en. One word that is being handled inconsistently is "expressing":

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

令人困惑的是,Safari能够将德语单词"Gesamtkunstwerk"连字起来:

Bafflingly, Safari is able to hyphenate the German word "Gesamtkunstwerk":

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

我不知道Safari如何感知到这个单词是德语并正在连字.有什么想法吗?

I have no idea how Safari is sensing that the word is German and is hyphenating it. Any ideas?

CSS3规范指示 hyphenate-resource 选项,但是我发现没有示例文件可包含和/或编辑.理想情况下,如果主流浏览器都支持该选项,那么我将其包括在内,并希望针对非英语单词对其进行编辑以及对其默认值进行编辑.

The CSS3 specification indicates a hyphenate-resource option, but I've found no example files to include and/or edit. Ideally, if that option is supported among the major browsers, I'd include it and want to edit it for non-English words as well as editing its defaults.

什么是最好的方法?

推荐答案

我正在努力解决浏览器处理断字的不同方式逐行对齐文本.

I'm struggling with the different ways browsers handle hyphenation for justified text from line to line.

方法1. CSS
有关纯CSS解决方案,请参见此链接.

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

您已经尝试过此操作,发现无论浏览器版本如何,Chrome绝对不支持,并且发现浏览器之间的结果缺乏一致性.也许想知道是否有一种更连贯的连字符方法可以在所有主流浏览器上正常工作?

You have already tried this, and found out that there is absolutely no support for Chrome no matter the browser version, and have seen the lack of consistency of the results across the browsers. And probably wondered is there a more consistent way to hyphen words that works well on ALL major browsers everyhere?

方法2.JavaScript
请参阅此链接,以获取适用于所有主要浏览器的解决方案.而且...比目前大多数浏览器所提供的语言支持更多.首先在您的站点中选择一种或多种您需要辅助支持的语言,然后按照步骤并自定义自己的脚本,然后最后单击创建!".它将为您创建缩小的javascript.将其复制到hyphenate.js文件中,最后不要忘了在要断字的段落上定义类.

Method 2. Javascript
See this link for there is a solution that works on ALL major browsers. And... with even more language support than most browsers offer at the moment. First select one (or multiple) languages you need hypening support in your site, then follow the steps and customise your own script, then finally click on "Create!" which will create the minified javascript for you. You copy that into your hyphenate.js file, and finally don't forget to define the class on the paragraphs you want to be hyphenated.

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

注意:请注意,我自定义了类,并缩短为连字符,而不是默认的连字符

这篇关于如何优化连字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆