1699913 - text-justify:inter-character does not spread characters to the full width of box

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[Rob Schlüter]

Attachment: firefox-text-justify-bug.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0

Steps to reproduce:

This HTML shows the bug on Firefox for Windows:

<div style="background-color:#69c; color:#fff; font-size:500%; font-family:Arial; width:10ch">
<p style="text-align-last:justify; text-justify:inter-character; width:100%">NOV</p>
<p style="text-align-last:justify; text-justify:inter-character; width:100%">2021</p>
</div>

Actual results:

The HTML should produce two lines, with the text "NOV" and "2021". Both words should touch the left and right borders of the box.

Errors:

• The characters do not touch the left border.
• The second line does not touch the right border.

See the attached image for the output. I've added orange colored boxes to identify the extra added space where the characters should be placed.

I noticed that the amount of extra space on the left and right changes for when different font is used. For example the Impact font shown much less extra space.

Expected results:

There should be no empty space on the left and right sides, the pixels of the characters should touch the borders.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

This looks like a mistaken expectation of what justification does. The pixels of the characters will not necessarily touch the borders of the frame within which the text is justified.

The positions of the glyphs are determined according to their typographic origin and advance width, so the left-most character has its origin at the left edge of the line, and the advance width of the rightmost character aligns with the right edge of the line. But where the "ink" (or visible pixels) appear will depend on the sidebearings of each glyph; in the case of the "1" in Arial, for example, the glyph has quite a large right sidebearing because Arial's digits are monospaced. A font with proportionally-spaced digits would likely look better here.

Note that the opposite effect can also occur:

<div style="margin: 20px; background:silver; color:red; font:100px Times New Roman; width:10ch">
<p style="text-align-last:justify; text-justify:inter-character; width:100%">fffff</p>
<p style="text-align-last:justify; text-justify:inter-character; width:100%"><i>fffff</i></p>
</div>

shows that the regular Times f glyph has a negative right sidebearing and projects beyond the nominal frame in which it is being justified (as it would also do if using text-align:right), while in the Italic face both left and right sidebearings of f are negative, so the second line will "overhang" on both sides.

Comment 3

[Rob Schlüter]

If I understand correctly each character in a font can have it's own position where the first visible left and right pixels are placed. And that position is also not consistent among fonts.

That means there is no way to justify text to make it line up at the borders with CSS. Using predefined margins will not work because a user might view the text with a different font. The only solution I can think of is using images.

Why does text-justify:inter-character even exist? Let's hope new CSS properties will be invented to do much more precise text/character manipulation.

Comment 4

[Jonathan Kew [:jfkthame]]

text-justify: inter-character is mostly intended for East Asian writing systems where there are no inter-word spaces.

https://drafts.csswg.org/css-text-3/#valdef-text-justify-inter-character