Bug 20606 – a fractional value of the css letter-spacing property is not rendered as expected

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Oliver]

a fractional value of the css letter-spacing property is not rendered as expected.

it seems that webkit/safari rounds down to whole-numbered values resp. values lower the 1 are ignored. 

just compare it to firefox, how I would expect the letter-spacing to work.

[Michael Dayah]

Based on conversation with Hyatt, fractional letter-spacing is a confirmed bug. Could this be changd to Open?

[Mark Rowe (bdash)]

<rdar://problem/7009794>

[Andy Matuschak]

Created attachment 33725 [details]
Recording of what could be achieved with CSS Animations and fractional letter-spacing.

[Andy Matuschak]

I'd just like to add my support to this bug: fractional letter-spacing is particularly important for CSS Animations. Many text behaviors designers would want are unusably choppy with integral spacing.

Please see the attachment for a recording of what a designer could achieve in just CSS if fractional letter-spacing were supported.

[Pete Zich]

I can confirm that this is still a problem even in the latest WebKit Nightly.

I have a test case for both spacing and the CSS animation at http://pzich.com/webkit/letter-spacing.html

[Travis Seitler]

Still a problem in the latest nightly (r57458).

[Mr. John Sly]

It's sad to see that this bug is "unconfirmed" when its easy to replicate and that nobody has been assigned to it and it was first created in 2008!

[Thomas Steinacher]

A shame this bug hasn't been addressed yet (still UNCONFIRMED?). It is important to specify exact letter-spacing values to achieve exact layouts.

[Zaharenia Atzitzikaki]

Still having this problem under Safari version 5.0.2 (6533.18.5) :/

[Peter Beverloo]

Internally the letter-spacing (and word-spacing too for that matter) get stored as shorts in WebCore::Font. Updating the parsing storage wouldn't be that much of a problem, but further on there are more methods which accept integers rather than floats.

[cam]

This is rediculous...

This bug was reported in 2008 and still not fixed.

Letter spacing is extremely important to adhering to a design.

Why is this NOT fixed??

Please don't turn into another IE6 chrome...

For such a 'advanced' browser, you should are missing the basics..

[Andrew Hilton]

Where would one start to fix this Jolly inconvenient Bug, it really would be rather spiffing if one managed to fix this.

[Clement Wehrung]

It really becomes a pain... No way to contact someone here ? This is not unconfirmed. 

(In reply to comment #12)
> Where would one start to fix this Jolly inconvenient Bug, it really would be rather spiffing if one managed to fix this.

[Pete Zich]

Wow, does this mean that it's been confirmed and will be fixed?

[David Kilzer (:ddkilzer)]

(In reply to comment #14)
> Wow, does this mean that it's been confirmed and will be fixed?

It's not assigned, so no one is working on a fix.

[Jürg Lehni]

I also would like to see this addressed or at least acknowledged. Most modern browser do the right thing, meanwhile the WebKit team appears to completely ignore this crucial issue which needs to be solved if Safari / Webkit is supposed to support proper high-quality typography on the web.

Simply searching for "letter-spacing" and "letterSpacing" in the source lead to interesting results:

Source/WebCore/rendering/InlineFlowBox.cpp (line 833, cast to int)
rightGlyphOverflow -= min(0, (int)style->font().letterSpacing());

Source/WebCore/platforms/graphics/chromium/FontChromiumWin.cpp (lines 419 and 474, rounded value)
advances[i] = lroundf(horizontalOffset) - lastHorizontalOffsetRounded;

There is also the font class which has a m_letterSpacing property of type "short"
Source/WebCore/platforms/graphics/Font.h (line 259)
short m_letterSpacing;

I did not check every instances of the letter-spacing since it was just a way to get a sense of what is causing it.

[Steve Meisner]

Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.

[Beth Dakin]

(In reply to comment #18)
> Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.

You're welcome to work on it yourself!

[Steve Meisner]

(In reply to comment #19)
> (In reply to comment #18)
> > Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
> 
> You're welcome to work on it yourself!

Would love to - but I would have no idea how to fix it. Not meaning to sound entitled - just trying to throw some weight behind this as something of importance.

[Clement Wehrung]

A working solution for your css : multiply every value by 20 and use a div with a css transform scale of 1/20

I can give you an example if you want :

<div style="transform: scale(0.050000); transform-origin: 0 0;">
<p style="position:absolute;top:314.616pt;left:126.478pt;width:258.280pt;height:183.240pt"><span class="ft00"  style="letter-spacing:-4.800pt;word-spacing:4.800pt;">Works!</span>
</div>

When I'll have some time, I may try to begin working on it since it creates very complicated issues for french publishers who want to achieve perfectly justified text in ePub (iBooks has the same bug since rendering is based on this)

[Cory Duncan]

I'm also running into this issue. With no viable solution outside of JavaScript, this is a particularly nasty bug for typography-heavy designs. Does anyone know if this is being actively worked on by the webkit team?

[Cory Duncan]

(In reply to comment #19)
> (In reply to comment #18)
> > Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
> 
> You're welcome to work on it yourself!

Beth, are you saying that the Safari team has no intention of fixing this bug?

[Beth Dakin]

(In reply to comment #23)
> (In reply to comment #19)
> > (In reply to comment #18)
> > > Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
> > 
> > You're welcome to work on it yourself!
> 
> Beth, are you saying that the Safari team has no intention of fixing this bug?

I am definitely not saying that. The bug would be resolved as "WONTFIX" if we decided not to fix it. As you can see, that is not the current state of the bug. 

I am simply stating that this is an open source project, and anyone has the power to fix this bug.

[Cory Duncan]

(In reply to comment #24)
> (In reply to comment #23)
> > (In reply to comment #19)
> > > (In reply to comment #18)
> > > > Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
> > > 
> > > You're welcome to work on it yourself!
> > 
> > Beth, are you saying that the Safari team has no intention of fixing this bug?
> 
> I am definitely not saying that. The bug would be resolved as "WONTFIX" if we decided not to fix it. As you can see, that is not the current state of the bug. 
> 
> I am simply stating that this is an open source project, and anyone has the power to fix this bug.

Thanks for the quick reply Beth. I only asked based on your response and the fact that this bug was reported in 2008 and is not currently assigned to anyone.

[Ohad Eder-Pressman]

Created attachment 164500 [details]
test-case

A testcase showing content that utilizes non-integer letter-spacing and that is expected to align in a uniform way but fails to do so.
Screenshots of how major browsers display this HTML included in the attached link.

[Ohad Eder-Pressman]

I confirm this is not working on Webkit. I can confirm that fractional/non-integer letter-spacing is supported on IE (I tested PC IE 9.0.8112.16421IC) and Firefox-for-Mac (I tested Mac Firefox 10.0.2).

See http://ohad-etc.s3.amazonaws.com/eReader%20content%20bugs/test2/index.html for screenshots of all major browsers and how they handle this case.

[Ebrahim Byagowi]

Interesting test from Microsoft:
http://ie.microsoft.com/testdrive/Performance/TextJustificationAnimated/Default.html
Below test is related to this bug!
Above one, is related to https://bugs.webkit.org/show_bug.cgi?id=76173 that seems it is near to be fixed :)

[Jan Pikla]

Is there any chance that bug will be fixed?

[Jürg Lehni]

From a typographic point of view it is shocking to see this still not being addressed. Pixel values for letter-spacing make very little sense, as their increments for normal text sizes are way too large. I cannot imagine this being a difficult issue to address. This should receive a higher priority because typography on the web is of importance. After all, most content that we look at is made out of it.

[Levi Weintraub]

Created attachment 194663 [details]
Patch

[Build Bot]

Comment on attachment 194663 [details]
Patch

Attachment 194663 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-commit-queue.appspot.com/results/17188812

New failing tests:
fast/text/text-letter-spacing.html
svg/W3C-SVG-1.1/text-spacing-01-b.svg
fast/text/basic/013.html
svg/custom/text-letter-spacing.svg
svg/batik/text/textLayout.svg
css1/text_properties/word_spacing.html
svg/text/text-spacing-01-b.svg
css1/text_properties/letter_spacing.html

[Build Bot]

Created attachment 194678 [details]
Archive of layout-test-results from webkit-ews-12

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-12  Port: <class 'webkitpy.common.config.ports.MacWK2Port'>  Platform: Mac OS X 10.8.2

[Build Bot]

Comment on attachment 194663 [details]
Patch

Attachment 194663 [details] did not pass mac-ews (mac):
Output: http://webkit-commit-queue.appspot.com/results/17305070

New failing tests:
fast/text/text-letter-spacing.html
svg/W3C-SVG-1.1/text-spacing-01-b.svg
fast/text/basic/013.html
svg/custom/text-letter-spacing.svg
svg/batik/text/textLayout.svg
css1/text_properties/word_spacing.html
svg/text/text-spacing-01-b.svg
css1/text_properties/letter_spacing.html

[Build Bot]

Created attachment 194715 [details]
Archive of layout-test-results from webkit-ews-08 for mac-future

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-08  Port: mac-future  Platform: Mac OS X 10.8.2

[Divya Manian]

*** Bug 117742 has been marked as a duplicate of this bug. ***

[Theresa O'Connor]

This has been fixed in Blink: http://src.chromium.org/viewvc/blink?view=revision&revision=153727

[Pete Zich]

Awesome! Someone finally did what we've all been avoiding!

Works beautifully in Chrome Canary.

[Nathan Whittaker]

+1

[Myles C. Maxfield]

Created attachment 220588 [details]
Patch

[WebKit Commit Bot]

Attachment 220588 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/platform/mac/css1/text_properties/letter_spacing-expected.png', u'LayoutTests/platform/mac/css1/text_properties/letter_spacing-expected.txt', u'LayoutTests/platform/mac/css1/text_properties/word_spacing-expected.png', u'LayoutTests/platform/mac/css1/text_properties/word_spacing-expected.txt', u'LayoutTests/platform/mac/fast/text/basic/013-expected.png', u'LayoutTests/platform/mac/fast/text/basic/013-expected.txt', u'LayoutTests/platform/mac/fast/text/text-letter-spacing-expected.txt', u'LayoutTests/platform/mac/svg/W3C-SVG-1.1/text-spacing-01-b-expected.png', u'LayoutTests/platform/mac/svg/W3C-SVG-1.1/text-spacing-01-b-expected.txt', u'LayoutTests/platform/mac/svg/batik/text/textLayout-expected.txt', u'LayoutTests/platform/mac/svg/custom/text-letter-spacing-expected.png', u'LayoutTests/platform/mac/svg/custom/text-letter-spacing-expected.txt', u'LayoutTests/platform/mac/svg/text/text-spacing-01-b-expected.png', u'LayoutTests/platform/mac/svg/text/text-spacing-01-b-expected.txt', u'Source/WebCore/ChangeLog', u'Source/WebCore/css/DeprecatedStyleBuilder.cpp', u'Source/WebCore/page/animation/CSSPropertyAnimation.cpp', u'Source/WebCore/platform/graphics/Font.cpp', u'Source/WebCore/platform/graphics/Font.h', u'Source/WebCore/rendering/style/RenderStyle.cpp', u'Source/WebCore/rendering/style/RenderStyle.h', '--commit-queue']" exit_code: 1
Traceback (most recent call last):
  File "Tools/Scripts/check-webkit-style", line 48, in <module>
    sys.exit(CheckWebKitStyle().main())
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/main.py", line 154, in main
    patch_checker.check(patch)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/patchreader.py", line 71, in check
    self._text_file_reader.process_file(file_path=path, line_numbers=None)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 118, in process_file
    lines = self._read_lines(file_path)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 86, in _read_lines
    contents = file.read()
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 671, in read
    return self.reader.read(size)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 477, in read
    newchars, decodedbytes = self.decode(data, self.errors)
UnicodeDecodeError: 'utf8' codec can't decode byte 0x89 in position 0: invalid start byte


If any of these errors are false positives, please file a bug against check-webkit-style.

[Myles C. Maxfield]

It looks like the style failure is because of the binary (.png) file upload

[Simon Fraser (smfr)]

Comment on attachment 220588 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=220588&action=review

> Source/WebCore/ChangeLog:9
> +        It is taken mostly from Blink r153727. Updating the relevant types is

Some is obviously from iOS too; you should say that.

> Source/WebCore/page/animation/CSSPropertyAnimation.cpp:1220
> +        new PropertyWrapper<float>(CSSPropertyLetterSpacing, &RenderStyle::letterSpacing, &RenderStyle::setLetterSpacing),
> +        new PropertyWrapper<float>(CSSPropertyWordSpacing, &RenderStyle::wordSpacing, &RenderStyle::setWordSpacing),

This looks the same as the iOS code below.

> Source/WebCore/rendering/style/RenderStyle.h:1666
> +    static float initialLetterWordSpacing() { return 0; }

Very confusing name; please break into two functions.

[Myles C. Maxfield]

Comment on attachment 220588 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=220588&action=review

>> Source/WebCore/ChangeLog:9
>> +        It is taken mostly from Blink r153727. Updating the relevant types is
> 
> Some is obviously from iOS too; you should say that.

Done.

>> Source/WebCore/page/animation/CSSPropertyAnimation.cpp:1220
>> +        new PropertyWrapper<float>(CSSPropertyWordSpacing, &RenderStyle::wordSpacing, &RenderStyle::setWordSpacing),
> 
> This looks the same as the iOS code below.

Done.

>> Source/WebCore/rendering/style/RenderStyle.h:1666
>> +    static float initialLetterWordSpacing() { return 0; }
> 
> Very confusing name; please break into two functions.

Done.

[Myles C. Maxfield]

http://trac.webkit.org/changeset/161521