“文本对齐：对齐”如何工作？答案

【问题标题】：How does "text-align: justify" works?“文本对齐：对齐”如何工作？
【发布时间】：2017-01-11 11:22:04
【问题描述】：

您好，我正在编写一个库。用于创建文本组合，内部定制。 -d3-fusiontext。

我要支持

文本对齐：对齐

用户说给我提供了一个长文本。提到它想要呈现的高度和宽度。库。将其包装起来，并通过包装的文本提供良好的视觉效果。它们都是 svg 文本元素，因此也可以导出。

现在我很想知道浏览器如何以合理的方式在内部对齐？任何来源/链接/主题开始。非常感谢任何帮助/指导。

这是一个很好的例子来说明事物的外观。

codepen.io/anon/pen/zxNJKE

P.S：很抱歉没有 gh-pages 和 docs，因为这些东西正在开发中。会更新。

只是一个普遍的好奇心，浏览器如何确定两端对齐的间距？

【问题讨论】：

SVG 中没有 text-align 属性，它只是一个 html 的东西。 w3.org/TR/SVG/propidx.html 列出 SVG CSS 属性。
对@RobertLongson，如果我们想支持SVG。让我们为它写逻辑，我们有一些论文/研究要开始吗？就像我有兴趣知道 HTML 美化它的方式或算法一样？
如果您想开发自己的库，您应该深入研究规范！ CSS 2.1 中的16.2 Alignment: the 'text-align' property 和CSS Text Module Level 3 中的Alignment and Justification 部分应该可以回答您的大部分问题。

标签： javascript html d3.js svg

【解决方案1】：

关于 SO 的其他答案提供了有关如何进行文本换行的信息。

一旦确定了哪些字符/单词适合线条，您可以使用 textLength 和 lengthAdjust 属性让 SVG 拉伸线条以适合宽度。

<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <line x1="200" y1="0" x2="200" y2="300" stroke="red"/>
  <line x1="800" y1="0" x2="800" y2="300" stroke="red"/>
  
  <text x="200" y="100" 
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>

  <text x="200" y="170" 
        font-family="Verdana" font-size="55" fill="blue"
        textLength="600" lengthAdjust="spacing">
    Hello, out there
  </text>

  <text x="200" y="240" 
        font-family="Verdana" font-size="55" fill="blue"
        textLength="600" lengthAdjust="spacingAndGlyphs">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

【讨论】：