Bug 20606

Summary: a fractional value of the css letter-spacing property is not rendered as expected
Product: WebKit Reporter: Oliver <diefans>
Component: Layout and RenderingAssignee: Myles C. Maxfield <mmaxfield>
Status: RESOLVED FIXED    
Severity: Normal CC: andy, bdakin, buildbot, cam.m.lloyd, chefturner, commit-queue, cory, cwehrung, david.m.i.g, ddkilzer, dino, divya, dstockwell, ebraminio, eoconnor, eric, esprehn+autocc, frickinawesome.steve, glenn, gyuyoung.kim, hyatt, igberty, info, kondapallykalyan, leviw, lists, macpherson, menard, michael, mitz, mmaxfield, mrjohnsly, nate.whittaker, ohad, ojan.autocc, peter, petezich, pknight, priyajeet.hora, rniwa, simon.fraser, stefan.galinski, stein, tom, travis.joel.seitler, webkit.review.bot, zaxarenia
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 Oliver 2008-09-02 14:03:13 PDT
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 Michael Dayah 2008-09-19 12:35:56 PDT
Based on conversation with Hyatt, fractional letter-spacing is a confirmed bug. Could this be changd to Open?
Comment 2 Mark Rowe (bdash) 2009-06-25 23:19:22 PDT
<rdar://problem/7009794>
Comment 3 Andy Matuschak 2009-07-29 11:02:36 PDT
Created attachment 33725 [details]
Recording of what could be achieved with CSS Animations and fractional letter-spacing.
Comment 4 Andy Matuschak 2009-07-29 11:03:50 PDT
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 Pete Zich 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 Travis Seitler 2010-04-12 11:21:15 PDT
Still a problem in the latest nightly (r57458).
Comment 7 Mr. John Sly 2010-09-03 12:59:40 PDT
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 Thomas Steinacher 2010-09-09 22:37:06 PDT
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 Zaharenia Atzitzikaki 2010-11-10 05:58:12 PST
Still having this problem under Safari version 5.0.2 (6533.18.5) :/
Comment 10 Peter Beverloo 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 cam 2011-05-16 00:17:02 PDT
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 Andrew Hilton 2011-07-27 13:25:31 PDT
Where would one start to fix this Jolly inconvenient Bug, it really would be rather spiffing if one managed to fix this.
Comment 13 Clement Wehrung 2011-10-26 05:29:32 PDT
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 Pete Zich 2011-11-14 21:44:51 PST
Wow, does this mean that it's been confirmed and will be fixed?
Comment 15 David Kilzer (:ddkilzer) 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 Jürg Lehni 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 david.m.i.g 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 Steve Meisner 2012-04-06 10:06:46 PDT
Please get this assigned - I can't setup basic letter spacing/font-sizes without using javascript.
Comment 19 Beth Dakin 2012-04-06 10:17:53 PDT
(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 Steve Meisner 2012-04-06 10:22:35 PDT
(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 Clement Wehrung 2012-04-06 15:18:40 PDT
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 Cory Duncan 2012-04-23 14:39:38 PDT
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 Cory Duncan 2012-04-23 14:56:01 PDT
(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 Beth Dakin 2012-04-23 15:00:03 PDT
(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 Cory Duncan 2012-04-23 15:02:00 PDT
(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 Ohad Eder-Pressman 2012-09-17 23:42:43 PDT
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.
Comment 27 Ohad Eder-Pressman 2012-09-17 23:47:04 PDT
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 ebraminio 2012-10-09 09:19:33 PDT
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 Jan Pikla 2013-02-25 02:30:10 PST
Is there any chance that bug will be fixed?
Comment 30 Jürg Lehni 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 Levi Weintraub 2013-03-22 17:18:21 PDT
Created attachment 194663 [details]
Patch
Comment 32 Build Bot 2013-03-22 18:41:18 PDT
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
Comment 33 Build Bot 2013-03-22 18:41:21 PDT
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
Comment 34 Build Bot 2013-03-23 12:48:19 PDT
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
Comment 35 Build Bot 2013-03-23 12:48:23 PDT
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
Comment 36 Divya Manian 2013-06-18 11:45:05 PDT
*** Bug 117742 has been marked as a duplicate of this bug. ***
Comment 37 Edward O'Connor 2013-07-17 11:12:44 PDT
This has been fixed in Blink: http://src.chromium.org/viewvc/blink?view=revision&revision=153727
Comment 38 Pete Zich 2013-07-17 12:53:12 PDT
Awesome! Someone finally did what we've all been avoiding!

Works beautifully in Chrome Canary.
Comment 39 Nathan Whittaker 2013-11-20 20:24:07 PST
+1
Comment 40 Myles C. Maxfield 2014-01-07 20:50:49 PST
Created attachment 220588 [details]
Patch
Comment 41 WebKit Commit Bot 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 Myles C. Maxfield 2014-01-07 20:55:47 PST
It looks like the style failure is because of the binary (.png) file upload
Comment 43 Simon Fraser (smfr) 2014-01-07 21:38:12 PST
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.
Comment 44 Myles C. Maxfield 2014-01-08 13:56:10 PST
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.
Comment 45 Myles C. Maxfield 2014-01-08 14:19:34 PST
http://trac.webkit.org/changeset/161521