Bug 255712
| Summary: | WebKit applies extraneous spaces when letter-spacing | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Fuqiao Xue <xfq.free> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, fantasai.bugs, mmaxfield, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Fuqiao Xue
Currently WebKit applies letter-spacing by adding a space after every letter in the text that is tracked. This results in a superfluous space at the end of the range, which creates an inappropriate gap before the following text. Letter spacing at the end of a line makes the line look misaligned in justified or right-justified text. It also has implications for text that has other styling, such as an outline or a coloured background, at the same time as being stretched.
Example in German: https://user-images.githubusercontent.com/4839211/87327736-5c89f780-c52c-11ea-8d22-7b994925d61a.png
Spec: https://github.com/w3c/csswg-drafts/issues/1518
https://drafts.csswg.org/css-text-3/#letter-spacing-property requires letter-spacing to only insert space within the selection, not outside, so it is the browser implementations that need to be fixed.
Tests & results:
Letter-spaced text should create no space on the outside of the selection: https://github.com/w3c/line_paragraph_tests/issues/55
Webkit puts the letter spacing after a letter even when it is at the end of a line, which makes the line look misaligned in justified or right-justified text.
For now, content authors have to work around the problem by applying a negative margin to remove the trailing space.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/108595427>
fantasai
See the latest CSSWG resolution on this topic: https://github.com/w3c/csswg-drafts/issues/10193
Current plan is to apply letter-spacing symmetrically on either side of each letter, and to trim at the line edges.
(Chrome suspects that trimming at the edge of an inline would not be Web-compatible, so we're starting with this more conservative change to see if it can fly.)