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

Posted 2023-04-13

【中文标题】我应该避免使用“text-align: justify;”吗？

【英文标题】：Should I avoid using "text-align: justify;"?

【发布时间】：2010-09-23 20:53:37

【问题描述】：

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

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

【问题讨论】：

对于未来的谷歌员工：检查已接受答案中的编辑。

【参考方案1】：

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

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

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

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

编辑：正如下面其他人所提到的，css hyphens 现在是可能的，除了不可行（不在 Chrome 中）。另外，css4 offers even more control。

【讨论】：

河流在高对比度布局中也更加明显。如果你使用较低的对比度——比如亮度为 4-5 比 1，并且还有一些色调对比度，河流就不太明显了。您还可以通过增加领先来减少河流效应。更长的线需要更大的引导来帮助眼睛追踪。

【参考方案2】：

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

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

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

编辑 2： CSS 现在允许 hyphenation 使用 hyphens 属性 [browser support]。 PPK 现在说的是add it to your stylesheets，而 Eric Meyer 说的是just add it for mobile。

编辑 3： A good little overview 我们现在可以使用的东西，还有一些 SASS。

【讨论】：

你听说过连字符[code.google.com/p/hyphenator]吗？如果您认为值得一提，也许您应该编辑您的答案以提及它。

我不同意。我喜欢两端对齐的文本，只要大多数行的长度在 50 到 60 em 左右，大多数浏览器都会做得很合理。

【参考方案3】：

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

【讨论】：

投了赞成票。然而，普遍的建议似乎是每行大约 10 个字，以获得最大的易读性/可读性。

如果你想更精确，每行大约 65 个字符。

谢谢，dylanfm。由于其精度，这是一个更可靠的测量 =)

一般来说，10 个单词的可读性，但根据我的经验，这对于合理的文本来说有点轻。

【参考方案4】：

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

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

【参考方案5】：

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

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

【讨论】：

100% on this >>> “我认为业余网页设计没有比这更大的危险信号了”.... 它应该保留用于印刷的婚礼和死亡通知。

【参考方案6】：

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

【参考方案7】：

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

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

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

【参考方案8】：

不应该在没有连字符的情况下使用对齐。这是一个php based hyphenation library，以及这个库到 WordPress 插件的端口：wp-Typography。

【参考方案9】：

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

【参考方案10】：

呃……不……！

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

【参考方案11】：

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

【讨论】：

text-justify 存在于最新版本的 CSS3 文本模块草案中，但 newspaper 的值不存在（并且可能从未存在过）。此外，这些是 CSS properties，而不是 tags

它确实存在——它是一个“微软”值。

@J-16SDiZ 所以它也可能不存在：P

@YiJiang text-justify: newspaper 在2003 CR for CSS3 Text 中，所以说它从未* 存在并不十分准确——无论它是否曾经是专有的. :)

【参考方案12】：

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

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

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

【讨论】：

您错过了最重要的部分 - 它的行为不正确仅适用于表格标题框。如果所有元素都是如此，那么没有人会使用这个属性

是的。应该已经读完了......我仍然在 IE7 中偶然发现了这一点，并且没有在我的项目中使用任何表格。奇怪。

【参考方案13】：

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

几个定义：调整字间距是“跟踪” 调整字符间距是“字距调整” 好的布局程序会自动进行一些字距调整，它会因字母对而异。变量的 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 的使用。名义上它接受选项

自动（默认） 间词 字符间（+ 出于遗留原因分发） 无

可以使用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% 两端对齐的文本。

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

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