small gaps (~1px) after breaking a long word
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: karklis, Unassigned)
Details
Attachments
(1 file)
|
8.15 KB,
image/png
|
Details |
Screenshot from 2019-06-01 00-11-56.png
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0
Steps to reproduce:
Situation: Trying to handle word breaking for long stuff (words or links), is working but with some results that i can't find the source.
Word example: Loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
CSS code that i use to handle it in this sequence:
word-break: break-word; //1 For chromiun
word-wrap: break-word; //2 For chromiun
overflow-wrap: anywhere; //3 For firefox
What code combination is causing the issue?
The code above with 'letter-spacing: 0.003em;', without it only on monospaced fonts. Tested with web fonts and system fonts affect all.
What browser?
Until now, only on Firefox desktop, in my case I only use Linux because it what I use, Chromium does not have this problem. On mobile, for me, (iphone 6s safari and Mozilla browser) works fine.
Firefox: It only show the problem in the rendered result that you see on the browser, the HTML is intact. If you have a text editor online, even if breaking the text, the gaps are not show, only when is rendered.
I have no clue about Firefox internals. In my opinion there is something related to the math done by overflow-wrap.
My full code: https://gitlab.com/freethebit/web-documentation-skin
(before complain about the low contrast, sidebar high contrast is activate by hovering).
Actual results:
for example, if the word break in 3 lines, all the gaps will be vertically aligned sometimes, after 9, 12, 14... characters, and in the same line can be more than 1 gap, depends on the width.
More screenshots in:
https://support.mozilla.org/en-US/questions/1260718#answer-1226898
Expected results:
no gaps.
|
||
Updated•6 years ago
|
|
||
Comment 1•6 years ago
|
||
So, str:
$ git clone https://gitlab.com/freethebit/web-documentation-skin`
$ cd web-documentation-skin
$ open src/index.html
It seems specific to the Oswald font, but I tried to isolate it for a bit and didn't succeed (probably depends some subpixel vertical positioning).
|
||
Comment 2•6 years ago
|
||
Possibly duplicate of bug 1441843, or at least related to the same issue?
(In reply to Jonathan Kew (:jfkthame) from comment #2)
Possibly duplicate of bug 1441843, or at least related to the same issue?
related to that, may be marked as duplicate.
when using a mix of different characters is difficult to spot, when repeating the same character is much easier to reproduce the problem.
Description
•