【问题标题】:Does `text-align: justify` stretch all white space characters evenly?`text-align: justify` 是否均匀拉伸所有空白字符?
【发布时间】:2020-01-10 08:49:20
【问题描述】:
Unicode 标准中有几个水平的white space characters,超出了通常的空格和不间断空格。我尝试将其中一些与text-align: justify 一起使用,结果在我看来是不均匀的:«通常» 空间似乎太容易拉伸,而其他空间几乎没有拉伸。例如:在左对齐的段落中,我可以很容易地发现一个奇怪的 en-space,在合理的情况下 - 不是这样,这取决于一条线需要的拉伸量。
因此问题是:网络引擎如何将 «justification stretch» 分布在各种空白字符之间?算法是怎么想的,比如«表意空间»、«中等数学空间»等等?
【问题讨论】:
标签:
css
webkit
typography
gecko
blink
【解决方案1】:
不是真正的答案,而是为您的工厂提供一些谷物。
Web 浏览器中的文本对齐方式 (text-justify) 不稳定。要查找详细信息,您需要查看代码。截至 2020 年 1 月,我的 Chrome 浏览器似乎除了自动使用https://www.w3schools.com/cssref/css3_pr_text-justify.asp的“播放”功能实现任何功能@
如果您想检查间距,请尝试在文本示例上叠加一个 1 em 网格。标准字间距为 1/3 em。 Knuth 的算法尝试 2/9 到 1/2 em。电脑屏幕更难阅读,而且您无需为纸张付费。即使是参差不齐的右文本也设置为比 1/3 em 更宽。猜测检查几页,它似乎是 1/2 em
良好的理由同时使用字符间距和单词间距。(注意:Knuth 避免了字符间距)要做到这一点的算法并非易事。在过去的糟糕日子里,'486 是一个快速处理器,桌面出版(不是 MS 字......)正在进入它自己的领域,当你在一开始进行更改时重排一大块文本是去的理由咖啡。多年来,Word 只是添加了额外的整个空格。我现在不是文字用户,所以不能说他们是否提高了游戏水平。
我的个人经验:使用衬线字体以 25% 的前导(15 上为 12pt,20 上为 16 点)的屏幕文本,最小行长为 35 个字符,并且自动断字看起来可以接受,而且比衣衫褴褛的权利要好得多。
延伸阅读:
https://onlinelibrary.wiley.com/doi/abs/10.1002/spe.4380111102 -- 除非你付钱,否则只能摘录。 Donald E. Knuth 和 Michael F. Plass, Software - Practice and Experience 11 (1981) 1119-1184 DOI: 10.1002/spe.4380111102,也可在 Digital Typography, Ch. 3,第 67-155 页。试试你当地的大学图书馆。
Donald E. Knuth 和 Michael F. Plass,软件 - 实践和经验 11 (1981) 1119-1184 DOI:10.1002/spe.4380111102,也可在 Digital Typography, Ch. 3,第 67-155 页。
也看到这个:http://defoe.sourceforge.net/folio/knuth-plass.html
【解决方案2】:
作为一个知识渊博的人向我解释on Reddit:
我只能轻松访问 blink 代码库,因为它证明了 kSpaceCharacter,
kTabulationCharacter, kNewlineCharacter, 和 kNoBreakSpaceCharacter (0x0020, 0x0009,
0x000A,0x00A0)。该函数名为NGInlineLayoutAlgorithm::ApplyJustify。
据我所知,从一些非常简短的测试中,它看起来在 Firefox 中也是一样的。
Further:
我也发现了它在 gecko 中的工作原理,而且非常复杂。有一长串“中断”字符取决于页面是用日语、中文还是其他语言呈现。对于非 jp/zh 语言,它的工作原理几乎与 blink 一样。
您可以找到它here。 aLangIsCJ 基本意思是是中文还是日文。
【解决方案3】:
@Ignat Insarov 你已经使用了 text-align: justify; 我认为 this-> 解决方案会对你有所帮助。这里我给出了多种类型的 text-align-last 你可以尝试你的内容我认为 text-align-last: center; 会有所帮助,
text-align: justify;
text-align-last: center;
/*OR*/
text-align-last: end;
/*OR*/
text-align-last: left;
/*OR*/
text-align-last: right;
/*OR*/
text-align-last: start;