Home  >  Article  >  Web Front-end  >  CSS秘密花园: 断字_html/css_WEB-ITnose

CSS秘密花园: 断字_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:53:021298browse

《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

设计师都喜欢搞文本对齐。在一些令人惊叹的杂志或书籍设计中,文本对齐随处可见。然而,在Web上,对齐却很少使用,甚至是熟练的设计师也很少用。这难道是因为我们从CSS1开始就有了 text-align: justify; ?

如上图所示,原因非常明显!!看看这些为了要对齐,去调整文本间距产生的“空白流”。这不仅让文本看起来不美观,对可读性也有影响。在印刷中,对齐一直是和连字符走在一起的。因为连字符允许单词被分解成音节表示,需要用于调整的空白非常少,这样文本看起来也更自然。

直到最近,Web上出现了用连字符连接文字的方法,不过都是比问题本身更糟糕的解决方案。常用的方法包括在服务器端编写代码,JavaScript,在线生成器,或甚至我们自己花费很多耐心手动为文本添加连字符( ­ ),这样浏览器才知道哪些单词需要断开。通常,这样的开销是不值得的,所以设计师们决定找到一种不同的文本对齐方法来替代。

解决方案

在CSS3中,新属性来啦: hyphens 。它接受三个值: none , manual 和 auto 。它的初始值是 manual ,以匹配现有的行为:我们可以用软连字符手动断字。很明显, hyphens: none; 将禁用此行为。但是暂不谈前面两个,真正神奇的效果是通过这行非常简单的CSS代码来完成的:

hyphens: auto;

这就是需要的所有东西了。你可以在下图中看到效果。当然,为了让它能生效,你需要通过HTML的 lang 属性声明一种语言,虽然这是你在编写HTML时都必须声明的。

应用 hyphens: auto 的效果

如果你想要对断字有更精细的控制(例如,简短的介绍文字),你可以使用一些软连接符( ­ )来帮助浏览器搞定。连字符属性会优先显示它们,接着才查找还有什么需要断开的地方。

TRIVIA自动换行的工作原理

像计算机科学中的很多东西,自动换行听起来非常简单而且直接,但是实际上并不是。要完成它有很多算法,但是最流行的是贪心算法和knuth-Pass算法。贪心算法是通过每次分析一行来实现的,用尽可能多的单词(或音节,如果使用断字的话)来填充,直到遇到第一个不适合单词/音节,它就会移动到下一行。

knuth-Plass算法,根据开发这个算法的工程师命名,要复杂得多。它的工作原理是,会将整个文本考虑在内,并产生更美观的效果,但是计算的过程也相当慢。

大多数桌面端的文本处理应用程序都使用knuth-Plass算法。但是浏览器目前是使用Greedy,因为性能原因,所以它们的对齐结果看起来就不那么美观了。

CSS断字的降级是非常优雅的。如果 hyphens 属性不被支持的话,你得到的就是像下图那样的文本对齐效果。虽然阅读起来并不美观愉快,但是能看到文本也已经是非常棒的了。

FUTURE控制连字符连接

如果你是一个有设计背景的人,你可能会对于断字这个想法不太喜欢,因为没有其它的设置是用来控制如何断开单词的。

但是你可能会很高兴地听到,在将来我们对于断字会有更多更精细的控制, CSS4 中计划有几个相关的属性,其中包括:

  • hyphenate-limit-lines
  • hyphenate-limit-chars
  • hyphenate-limit-zone
  • hyphenate-limit-last
  • hyphenate-character
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn