105841 - letter-spacing: pieces of text overlap with one another

Status: RESOLVED WORKSFORME

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

Description

[Dan Tobias]

I'm not positive whether this is actually a bug in Mozilla, since that page has
a number of HTML validation errors, but on the page at the cited URL, my copy of
Mozilla always renders it with the end of "Andrés Puentes" overlapping the
beginning of "hizo bien en perdonar".  It seems to be the result of the
application of CSS classes to the respective text fragments.

Comment 1

[Dan Tobias]

Attachment: Clip from screen shot showing overlap, in case it's not reproduced on your system

Comment 2

[Ashley Bischoff (blog at handcoding.com)]

WFM 2001101909 on Win2k. Reporter: Which build are you using?

You may wish to try a more recent build:
http://ftp.mozilla.org/pub/mozilla/nightly/latest/mozilla-win32-talkback.zip
(as always, be sure to delete your old Mozilla directory before installing the
new one)

Also, in future, please use the Bugzilla Helper:
http://www.mozilla.org/quality/help/bugzilla-helper.html
(among other things, it automagically adds your Build ID)

Comment 3

[Alex Vincent [:WeirdAl]]

Confirmed.  Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.5+) Gecko/20011019

Had to look at the screenshot before I saw it, though.  Recommend anyone else
look at said screenshot before checking this bug.

Here's the offending source:

<td WIDTH="468"><font face="Arial" size="2" color="#FFFFFF"
class="arbknegro16">¿Crees que <b>Andrés Puentes</b> hizo bien en perdonar a
Televisa?</font></td>

Comment 4

[Ashley Bischoff (blog at handcoding.com)]

WeirdAl: I saw the overlap in the screenshot, but I didn't see that same overlap
when I loaded the URL.. Did you see the overlap in both the screenshot and the URL?

Comment 5

[Marc Attinasi]

I do not see this on Win2000 - looks fine (and I did look at the screenshot).

Petersen, can you check on win98 with a new build?

Comment 6

[Alex Vincent [:WeirdAl]]

Yep, still there in both the URL and the screenshot.

Something strange about this.  Why is the bolded text wider than the non-bolded
in that section?

Rembrandt:  how about a screen shot from you?  Might help for comparison.

Comment 7

[Christopher Hoess (gone)]

WFM, yesterday's Linux CVS.

Comment 8

[Christopher Hoess (gone)]

Attachment: screenshot provided per Alex's request

Comment 9

[Alex Vincent [:WeirdAl]]

I think this is a fonts problem.  Arial is not a font that maintains constant
width of its characters, like Courier New does.  Note Mr. Hoess's screenshot has
a totally different font.

I don't have a font exactly named Arial on my system.  I have Arial (Arabic),
Arial (Baltic)... all the way to Arial (Western).  In Mozilla, though, I am
using the Western set.  The font face is specifically set in the tag to "Arial".

Mr. Hoess doesn't have it either -- he says that's Adobe Times font on his machine.

Comment 10

[R.K.Aa.]

Attachment: screenshot linux 2001102106 with arial font

Comment 11

[Alex Vincent [:WeirdAl]]

OK, something I notice with R.K.Aa's screenshot versus the reporter's (which is
what I see).  The bolded text is wider on our Win98 machines.  It is the same
width on the Linux boxes.

Comment 12

[Alex Vincent [:WeirdAl]]

Hey, here's something.

Win98:  bug occurs when Preferences -> Appearance, Fonts, Allow document to use
other fonts is checked.  When unchecked, looks fine.

Comment 13

[Alex Vincent [:WeirdAl]]

Stylesheet for the document:  http://www.reforma.com/StyleSheet.css

Comment 14

[Alex Vincent [:WeirdAl]]

:)

.arbknegro16
{
    COLOR: #000000;
    FONT-FAMILY: arial black;
    FONT-SIZE: 16px;
    FONT-WEIGHT: normal;
    LETTER-SPACING: -1px
}

Comment 15

[Ashley Bischoff (blog at handcoding.com)]

Attachment: Win2k screenshot w/ Arial installed & w/ "Allow document... fonts"

Comment 16

[Alex Vincent [:WeirdAl]]

Attachment: Testcase, greatly simplified

Comment 17

[Alex Vincent [:WeirdAl]]

All right.  After a lot of pruning, I've reduced the original page to a testcase
which is, on my system anyway, very clearly showing a bug.

.arbknegro16
{
    FONT-FAMILY: arial black;
    FONT-SIZE: 24px;
    LETTER-SPACING: -5px
}

The part that gets my attention is the -5px part.  Are negative values allowed
for CSS letter spacing?

Again, on my system, the Arial Black font gets wider when bolded.  But
apparently, the rendering engine is not correctly handling the width change.

Comment 18

[Ashley Bischoff (blog at handcoding.com)]

Attachment: Win2k 2001102203 screenshot of testcase

Comment 19

[Alex Vincent [:WeirdAl]]

OK, I think we've established pretty clearly this bug applies to Win98, but not
Linux or Win2K.  :)

I'll attach a Win98 screenshot of same testcase in a moment.

Comment 20

[Ashley Bischoff (blog at handcoding.com)]

WeirdAl: Negative values are definitely allowed in letter-spacing:

http://www.w3.org/TR/1998/PR-CSS2-19980324/text.html#spacing-props

http://www.w3.org/Style/CSS/Test/current/sec542.htm

Comment 21

[Alex Vincent [:WeirdAl]]

Attachment: 2001102203 testcase screenshot, Win98SE

Comment 22

[Marc Attinasi]

This is getting interesting - a Win98 font problem maybe? How does IE on Win98
handle the reduced testcase (or the URL for that matter)? Have they figured out
how to 'work around' the font differences?

Comment 23

[Alex Vincent [:WeirdAl]]

Attachment: IE6 screenshot of testcase (it passes)

Comment 24

[Alex Vincent [:WeirdAl]]

qawanted:  I'd like to see if it's specific to Win98, or if Win95, WinME also
show this bug.  :)  Also, we've had no word on whether or not Mac or WinNT
systems reflect it.

My Win95 machine is down; I expect it to be that way for another week.

Comment 25

[Dan Tobias]

Here's another page with a text overlap problem, this time vertical rather than
horizontal:
http://www.nic.coop/info.asp

Comment 26

[Steven Cole]

Re: the QaWanted in comment 24:

I see this bug on WinME (build id 2002012203), Win98 (build ID 2002012403), but
not WinNT (build ID 2002012403).

Comment 27

[Mathias Bogaert]

Confirming. Build 2002052408 Win2K

Comment 28

[Phil Miller]

I believe I'm seeing this or something similar on www.mozilla.org as well! Take
a look at the end of the text in the my attached screenshot.
I'm running Build ID 2002-06-11-08 on Windows 98.

Comment 29

[Phil Miller]

Attachment: The bug, on our own mozilla.org

Notice the link at the end of the text in the picture.

Comment 30

[Christopher Hoess (gone)]

P.M.: AFAIK mozilla.org does not use "letter-spacing"; this is an unrelated and
separately fixed bug. Please do not attach testcases/screenshots to this bug
that do not correspond to the description.

Comment 31

[adam rice]

Can confirm this bug in Mozilla 1.2.1 (OS X) and Chimera 0.6 when viewing, for
example, http://www.scratchings.net/

Seems to occur at style transitions (text size, italic/roman)

Comment 32

[Moiz Dohadwala]

looks fine on my machine: win2k pro, sp3, mozilla build 2003010408.

Comment 33

[Zarco Zwier]

Nothing wrong here: Win2k SP3 build Mozilla/5.0 (Windows; U; Windows NT 5.0;
en-US; rv:1.4a) Gecko/20030228

Comment 34

[Christopher Hoess (gone)]

The bug is still visible in the reduced testcase in build 2003052508 on Windows
XP. ->Fonts & Text

Comment 35

[Vedran Miletic]

retargeting

Comment 36

[Christopher Hoess (gone)]

Build 2003101104 on Windows XP is now rendering the reduced testcase fine
initially, but selecting the text in question causes part of the "s" to disappear.

Comment 37

[tm236]

Attachment: no space between style transition

Mac OSX

Comment 38

[James Cridland]

I'm seeing this in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060331 Firefox/1.6a1

A few examples: www.virginradio.co.uk uses letter-spacing:-1px; in the little text at the top-right of the page. Currently, this build of Firefox is not actioning the letter-spacing:-1px at all - the right-hand side is jumbled and overlapped, and hangs off the side of the page.

For a more severe example, try http://old.mediauk.com/ which uses letter-spacing:-1px for all links. Notice how the underlining of the links is the correct length, but the text is too long (since letter-spacing is not being applied), and that links which are close together are overlapping each other.

Both these pages display fine on current production versions of Firefox (and MSIE), and on Mac OSX nightly builds of Firefox. I am at least partially responsible for both the websites linked to in this posting.

Comment 39

[Ioana (away)]

WFM with the attached test case on Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0

Please only reopen this bug if you have a testcase it can be reproduced with (most links in the comments above are invalid are the pages have changed too much).