css - 我应该避免使用“text-align: justify;”吗？

Question

有什么理由避免使用text-align: justify;？

它是否会降低可读性或导致问题？

score 61 · Accepted Answer

首先，这纯粹是一个与设计相关的问题和解决方案。网格的设计指定是否需要对齐文本。我认为 justify align 单独对可用性没有重大影响。使文本难以辨认的不良排版会降低可用性。也就是说，请确保您的字体具有鲜明的对比和良好的间距平衡。字体大小也很重要。

该站点是在线证明文本合理性的成功尝试。由于使用 CSS 无法像使用 InDesign 那样控制字母和单词之间的空格，因此很难证明文本的合理性并且不会让行中的空白“河流”流过，当单词之间的空格时会发生这种情况超过行间距。使文本对齐变得困难的事情：长的单词，没有足够的单词的行宽，以及文本和背景颜色之间的对比太大；它们使河流显得更宽、更明显。

排版的理想是有一个均匀的文本块，如果你眯着眼睛，文本块就会变成一个均匀的实心阴影。因此，如果您在白色背景上将文本保持在大约 10 像素和 60% 的灰色，并且有适合大约 20 个单词的行，则 justify align 看起来应该不会难看。但请记住，这对提高可用性没有任何帮助。小而相对较轻的文字会惹恼很多人，尤其是年长的读者。

我应该注意，通过（软连字符）正确地分离像 superawesome 这样长而麻烦的词，您可以模仿正确的排版（例如 InDesign）。有很多东西可以帮助你做到这一点。我会推荐隐藏、操作和显示要在客户端完成的文本的逻辑，也许使用这个.

编辑：正如下面其他人提到的，现在可以使用css 连字符，除非不可行（不在 Chrome 中）。另外，css4 提供了更多的控制。

score 24 · Accepted Answer

text-align: justify 目前不应该在浏览器中使用。他们不擅长处理其中的微小细节，并且输出最终包含大量河流，并且不支持连字符（软连字符除外）。

上面的注释是 4.5 年前写的。事情正在慢慢改变...... http://caniuse.com/#feat=css-hyphens

编辑： 在这个答案的评论中，连字符引起了我的注意。看起来它使 text-align 值得使用，请查看使用它的网站。在使用此脚本之前，您可能希望使用 javascript 来应用 text-align justify，这样那些没有 javascript 的人就不会被抓到。

编辑 2： CSS 现在允许使用属性 [浏览器支持]进行断字。PPK 现在说将其添加到您的样式表中，而 Eric Meyer 说只需将其添加到移动设备中。hyphens

编辑 3：对我们现在可用的东西 的一个很好的概述，带有一些 SASS。

score 12 · Accepted Answer

其他人提出的关于对齐对齐的问题在窄列中更为普遍。如果您的列相对于您的字体大小和其他参数足够宽，那么可以证明文本的合理性。假设您平均每行至少需要 12 到 15 个单词。越多越好。

score 5 · Accepted Answer

没有技术上的理由不这样做 - 这纯粹是一个设计决定。许多人发现合理的文本更难阅读，但我想这取决于您的情况。虽然它可以很好地用于打印，但通常网络浏览器不会对文本的最终输出提供足够的控制，以保证您所提供的内容不会在某些人的屏幕上看起来像垃圾。

你最好的选择是避免辩解。

score 5 · Accepted Answer

我想不出一个令人信服的理由为什么不证明文本是合理的——在某种程度上，内容的体积和宽度几乎要求它是合理的。当然，你会遇到由某些单词组合组成的内容的问题，但在我看来，如果你看到河流和单词之间异常大的空间，你就会遇到完全不同的问题——可读性和清晰度。

我会不惜一切代价避免居中的正文。我认为业余网页设计没有比这更大的危险信号了。

score 1 · Accepted Answer

我更喜欢左对齐（文本对齐：左），因为它通常更具可读性。阅读均匀间隔的单词也更快，所以我听到了。除非你有使用 justify 的文体原因，否则请保持左、右或居中。特别是对于正文，请使用左。（实际上，对于另一个方向的文本（例如希伯来语），您需要类似“前进”的东西......）

score 1 · Accepted Answer

像任何网页设计问题一样......这取决于。正如已经建议的那样，两端对齐的文本通常不会在窄列中看起来很好。我建议不要将其作为侧边栏中的一般规则，因为侧边栏通常很窄。

使用通常推荐的每行 10 个单词的正文（或任何数量以上的单词），您可能能够摆脱合理的文本，并且在大多数情况下让它看起来相当不错，除非您使用了很多非常长的单词和/或字符串。

我想我以前在 StackOverflow 上拉过这个网站，但是Jon Tan在他的正文（在文章中）使用了合理的文本，而且 99.99% 的时间看起来都很棒。

score 1 · Accepted Answer

不使用连字符就不能使用理由。这是一个基于 PHP 的连字符库，以及这个库到 WordPress 插件的端口： wp-Typography。

score 0 · Accepted Answer

我认为它在打印上完全没问题，但在大多数 Web 浏览器上它很笨拙，因为缺乏对间距和连字符的精细控制。在某些情况下，排版师甚至可以稍微调整字母间距或字体收缩，因为可以微调页面/列（至少在杂志中）。

score 0 · Accepted Answer

呃……不……！

[认真] WordPress 使用 justify，我认为这对于它是否会降低可读性来说是一个非常有力的声明......

score 0 · Accepted Answer

您也可以使用 text-justify:newspaper。text-justify css 标签可帮助您控制对齐时文本的换行方式

score 0 · Accepted Answer

应该提到的是，Internet Explorer（至少）最高版本 8 无法text-align: justify正确呈现。相反，它被解释为text-align: center.

这里有更多信息：text-align: justify

让我有些头疼，想知道为什么 IE 一直居中。也许它可以节省其他人一些时间。

score 0 · Accepted Answer

文本对齐可以通过多种方式完成。

几个定义：调整单词之间的间距是“跟踪” 调整字符之间的间距是“紧缩” 好的布局程序会自动进行一些紧缩，它会因字母对而异。变量的 va 可以比 xa 更接近。好的字体内置了字距调整提示表以帮助完成此过程。

在等宽字体的早期，它是通过在单词之间插入额外的空格来完成的。这使得输出看起来非常笨重。如果行尾有 4 个空格，行中有 6 个空格，则其中 4 个将变为双空格。

等宽字体不应该被证明是合理的。

对于可变宽度字体，我们有 em 空格、en 空格等，因此可以更好地分配空间。

我认为这是大多数浏览器现在的位置。它在大多数情况下工作得相当好。要使其正常工作，需要满足以下条件：

一行需要合理数量的单词。
行尾的大字会产生问题。

英语中的平均单词是 5 个字符。因此，平均而言，您将有 5 个字符（5 个字符的单词加上空格不适合，因此会被撞到下一行）

如果一行有 10 个单词，那么你需要在每个单词间隙添加大约一半的标准空格。

如果最后一个词很长，比如“头痛”并且没有空间，那么现在你有 10 个空间可以分配。这开始看起来很糟糕。

这就是连字字典发挥作用的地方。断字可以通过算法完成，但有足够多的例外，拥有字典会有很大帮助。（字典中没有的单词的软连字符有一个特殊字符。）

连字符可以拆分一个单词，使该行更均匀地填充。

根据经验，我认为 65 em 的线长是一个很好的折衷方案。这在很多时候每行给出 11-13 个单词。

对齐的另一种方法是在字符之间拆分空间。这避免了上面的一些问题，但如果你在没有足够的行中分配大量空间，仍然看起来很奇怪。您不时在报纸上看到这一点，其中一个单词似乎在每个字符之间都有一个完整的空格。对于更长的线路，这是一个很好的论据。

好的排版程序（InDesign、*TeX、Framemaker）将字间距中的额外空间和字符之间的微小额外空间结合起来。

块上有一个新的孩子，可以在 CSS 中使用 text-justify 来修改 text-align: justify 的使用。名义上它接受选项

自动（默认）
间词
字符间（+出于遗留原因分发）
没有任何

CanIuse https://caniuse.com/#search=text-justify CSS 工作组https: //drafts.csswg.org/css-text-3/#text-justify-property

CanIuse 目前仅报告 Firefox 的合规性，Chrome 支持它，但要求您启用实验性功能。CanIuse 声称支持是错误的。访问 Chromium 错误跟踪站点，声称它已修复。去搞清楚。没有测试过。

其他务实点：

我对网站的样式表做了四处更改：

最大线长 65 rem
正文字体增加到 110%
领先增长至 125%
对齐文本。

结果是每个会话的网站停留时间和页面数增加了一倍。

轶事，但可能值得您自己测试。

css - 我应该避免使用“text-align: justify;”吗？

13 回答 13

Related

Reference