「text-align：justify」是如何工作的？

你好，我正在寫一個庫。用於創建文本的組合，內部定製。 - d3-fusiontext。「text-align：justify」是如何工作的？

我想支持

的text-align：對齊

用戶說爲我提供了一個長的文本。提到它想渲染的高度和寬度。 lib。將它包起來，並提供包裝文本的良好視覺效果。它們都是svg文本元素，所以它也可以導出。

現在我會好奇地想知道瀏覽器如何以合理的方式在內部對齊？任何源/鏈接/主題開始。任何幫助/指導，高度讚賞。

這是事情看起來很好的一個很好的例子。

codepen.io/anon/pen/zxNJKE

P.S：很抱歉，沒有GH-網頁和文檔的東西正在開發。將更新。

只是一個普遍的好奇心瀏覽器如何確定合理對齊的間距？

來源

2017-01-11 Ayan

有在SVG無text-align屬性，它是一個HTML唯一的事情。 https://www.w3.org/TR/SVG/propidx.html列出了SVG CSS屬性。 –

Right @RobertLongson，如果我們想支持SVG。讓我們寫下它的邏輯，我們是否有一些文件/研究開始？像我有興趣知道HTML美化它的方式或算法？ – Ayan

如果你正在開發自己的圖書館，你應該深入研究規範！ * CSS.2.1 * [* 16.2對齊：'text-align'屬性*]（https://www.w3.org/TR/CSS2/text.html#alignment-prop）和[*對齊和理由*]（https://drafts.csswg.org/css-text-3/#justification）* CSS Text Module Level 3 *應該回答大部分問題。 – altocumulus

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>

來源

2017-01-11 11:51:36

「text-align：justify」是如何工作的？

回答

相關問題