Bug 20606

Summary: a fractional value of the css letter-spacing property is not rendered as expected
Product: WebKit Reporter: Oliver <diefans@gmail.com>
Component: Layout and RenderingAssignee: Myles C. Maxfield <mmaxfield@apple.com>
Status: RESOLVED FIXED    
Severity: Normal CC: alexis@webkit.org, andy@andymatuschak.org, bdakin@apple.com, buildbot@hotmail.com, cam.m.lloyd@gmail.com, chefturner@web.de, commit-queue@webkit.org, cory@findsubstance.com, cwehrung@gmail.com, david.m.i.g@gmail.com, ddkilzer@webkit.org, dino@apple.com, divya@nimbupani.com, dstockwell@chromium.org, ebraminio@gmail.com, eoconnor@apple.com, eric@webkit.org, esprehn+autocc@chromium.org, frickinawesome.steve@gmail.com, glenn@skynav.com, gyuyoung.kim@webkit.org, hyatt@apple.com, igberty@gmail.com, info@janpikla.cz, kondapallykalyan@gmail.com, leviw@chromium.org, lists@scratchdisk.com, macpherson@chromium.org, michael@dayah.com, mitz@webkit.org, mmaxfield@apple.com, mrjohnsly@gmail.com, nate.whittaker@gmail.com, ohad@visual-i.com, ojan.autocc@gmail.com, peter@chromium.org, petezich@gmail.com, pknight@apple.com, priyajeet.hora@gmail.com, rniwa@webkit.org, simon.fraser@apple.com, stefan.galinski@gmail.com, stein@adobe.com, tom@eggdrop.ch, travis.joel.seitler@gmail.com, webkit.review.bot@gmail.com, zaxarenia@gmail.com
Priority: P2 Keywords: BlinkMergeCandidate, HasReduction, InRadar, ReviewedForRadar
Version: 525.x (Safari 3.1)   
Hardware: PC   
OS: All   
URL: http://instantdreams.net/static/letter_spacing.html
Attachments:
Description Flags
Recording of what could be achieved with CSS Animations and fractional letter-spacing.
none
test-case
none
Patch
none
Archive of layout-test-results from webkit-ews-12
none
Archive of layout-test-results from webkit-ews-08 for mac-future
none
Patch simon.fraser: review+

Description From 2008-09-02 14:03:13 PST
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.
------- Comment #1 From 2008-09-19 12:35:56 PST -------
Based on conversation with Hyatt, fractional letter-spacing is a confirmed bug. Could this be changd to Open?
------- Comment #2 From 2009-06-25 23:19:22 PST -------
<rdar://problem/7009794>
------- Comment #3 From 2009-07-29 11:02:36 PST -------
Created an attachment (id=33725) [details]
Recording of what could be achieved with CSS Animations and fractional letter-spacing.
------- Comment #4 From 2009-07-29 11:03:50 PST -------
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.
------- Comment #5 From 2010-01-23 14:19:24 PST -------
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
------- Comment #6 From 2010-04-12 11:21:15 PST -------
Still a problem in the latest nightly (r57458).
------- Comment #7 From 2010-09-03 12:59:40 PST -------
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!
------- Comment #8 From 2010-09-09 22:37:06 PST -------
A shame this bug hasn't been addressed yet (still UNCONFIRMED?). It is important to specify exact letter-spacing values to achieve exact layouts.
------- Comment #9 From 2010-11-10 05:58:12 PST -------
Still having this problem under Safari version 5.0.2 (6533.18.5) :/
------- Comment #10 From 2010-11-14 09:48:32 PST -------
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.
------- Comment #11 From 2011-05-16 00:17:02 PST -------
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..
------- Comment #12 From 2011-07-27 13:25:31 PST -------
Where would one start to fix this Jolly inconvenient Bug, it really would be rather spiffing if one managed to fix this.
------- Comment #13 From 2011-10-26 05:29:32 PST -------
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.
------- Comment #14 From 2011-11-14 21:44:51 PST -------
Wow, does this mean that it's been confirmed and will be fixed?
------- Comment #15 From 2011-11-15 05:52:44 PST -------
(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.
------- Comment #16 From 2011-12-16 08:15:31 PST -------
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.
------- Comment #17 From 2012-02-16 07:00:16 PST -------
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.
------- Comment #18 From 2012-04-06 10:06:46 PST -------
Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
------- Comment #19 From 2012-04-06 10:17:53 PST -------
(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!
------- Comment #20 From 2012-04-06 10:22:35 PST -------
(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.
------- Comment #21 From 2012-04-06 15:18:40 PST -------
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)
------- Comment #22 From 2012-04-23 14:39:38 PST -------
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?
------- Comment #23 From 2012-04-23 14:56:01 PST -------
(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?
------- Comment #24 From 2012-04-23 15:00:03 PST -------
(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.
------- Comment #25 From 2012-04-23 15:02:00 PST -------
(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.
------- Comment #26 From 2012-09-17 23:42:43 PST -------
Created an attachment (id=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.
------- Comment #27 From 2012-09-17 23:47:04 PST -------
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.
------- Comment #28 From 2012-10-09 09:19:33 PST -------
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 :)
------- Comment #29 From 2013-02-25 02:30:10 PST -------
Is there any chance that bug will be fixed?
------- Comment #30 From 2013-02-25 07:16:33 PST -------
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.
------- Comment #31 From 2013-03-22 17:18:21 PST -------
Created an attachment (id=194663) [details]
Patch
------- Comment #32 From 2013-03-22 18:41:18 PST -------
(From update of attachment 194663 [details])
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
------- Comment #33 From 2013-03-22 18:41:21 PST -------
Created an attachment (id=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
------- Comment #34 From 2013-03-23 12:48:19 PST -------
(From update of attachment 194663 [details])
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
------- Comment #35 From 2013-03-23 12:48:23 PST -------
Created an attachment (id=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
------- Comment #36 From 2013-06-18 11:45:05 PST -------
*** Bug 117742 has been marked as a duplicate of this bug. ***
------- Comment #37 From 2013-07-17 11:12:44 PST -------
This has been fixed in Blink: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
------- Comment #38 From 2013-07-17 12:53:12 PST -------
Awesome! Someone finally did what we've all been avoiding!

Works beautifully in Chrome Canary.
------- Comment #39 From 2013-11-20 20:24:07 PST -------
+1
------- Comment #40 From 2014-01-07 20:50:49 PST -------
Created an attachment (id=220588) [details]
Patch
------- Comment #41 From 2014-01-07 20:53:11 PST -------
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.
------- Comment #42 From 2014-01-07 20:55:47 PST -------
It looks like the style failure is because of the binary (.png) file upload
------- Comment #43 From 2014-01-07 21:38:12 PST -------
(From update of attachment 220588 [details])
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.
------- Comment #44 From 2014-01-08 13:56:10 PST -------
(From update of attachment 220588 [details])
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.
------- Comment #45 From 2014-01-08 14:19:34 PST -------
http://trac.webkit.org/changeset/161521