Bug 3409 – CSS1: Safari ignores "text-transform" attribute in "first-line" CSS rules

• Component: CSS
• Status: NEW

[Dave Hyatt]

3/1/04 3:21 PM Tony Thomson:
* SUMMARY
Safari seems to ignore the "text-transform" attribute of "first-line" CSS rules.

* STEPS TO REPRODUCE
1. Load the attached sample web page in Safari 1.2 and Firefox 0.8.

* RESULTS
Notice that the first line of the the contact-info div doesn't render as all caps in Safari, but does in 
Firefox and IE.

* REGRESSION
Occurs in:
- Safari 1.2
Does not occur in:
- Firefox 0.8
- IE 5.2.3

* NOTES
Safari seems to ignore the "text-transform" attribute only with the "first-line" property, but not when 
placed normally in a div:
Works:             div#contact-info { text-transform: uppercase; }
Doesn't work:   div#contact-info:first-line {  text-transform: uppercase; }
Other attributes (like "font-weight") render normally in the "first-line" property.

[Dave Hyatt]

Not sure I can attach the test case since it has someone's content, maybe someone should just make a 
simple new case.

[Dave Hyatt]

Apple Bug: 3574595

[Brent Northam]

Created attachment 2544 [details]
Simple testcase 1

Here's a simple testcase that shows the bug using build 412 with a WebKit built
from CVS on 6/22/05.

[Joost de Valk (AlthA)]

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

Is this bug still active? No movement in the last year? It is still apparent in the current build (419.3).

[Dave Hyatt]

It is still active.  This bug is really hard to fix the right way, since text-transform would have to be completely re-architected in order to fix it.  Right now text-transform is just done on an entire DOM text node.   text-transform has to be rewritten in order to transform individual text line boxes instead.

Might be possible to come up with a hack that works though.

[Kyle Meyer]

This bug has been inactive for two years—any plans to fix this?

Still broken in 40777 

[Dave Hyatt]

This bug is pretty hard to fix.  

text-transform actually affects metrics, so applying this to first-line creates huge complications in the engine.  Effectively the current implementation of text-transform has to just be thrown out and completely rewritten from scratch.

calcPrefWidths would need to transform the text character by character as it measured while it was looking at the first line.  findNextLineBreak would need to do the same.

An effective way of doing this would be to actually pass a transform constant all the way down into the Font code and have it do the transformation when measuring and rendering.  This would be somewhat similar to how synthesized small-caps works today.

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

[Philip Kahn]

Confirmed to exist in Safari 4.0.3, and Google Chrome 4.0.206.1.  I realize it's hard to change - but it *is* a 5 year old bug now.

[Dean Hall]

Am I correct in assuming that the root cause of this bug also causes :first-line pseudo-elements to be rendered in the browser's default font (it appears) when a text-transform is applied?

[Alexey Proskuryakov]

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

[Keefe]

Any plans to fix this bug? it's upsetting to learn that this bug remains unfix after 5 years++

[Julie Jeongeun Kim]

It seems to be same as "[Bug 34753] CSS 2.1: first-line-selector-008.htm test fails".
I've uploaded patch on '34753' and I'm waiting for review.

[Oladimeji]

Is there any improvement yet? how can I follow up.. I need to do a presentation on Wednesday for this bug report..

[Jenna Power]

I confirm that this is still a bug in Safari 5.0.6 and Chrome 18.0.1, nearly seven years later. Given that Firefox does this correctly and presumably you can look at their backend (Gecko being FOSS), how are they doing it?

[Alexey Proskuryakov]

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

[Oliver Kohll]

Just another vote for this bug

[Pravin D]

Hi Dave,

I had tried to fix this issue in https://bugs.webkit.org/show_bug.cgi?id=34753 (first line decoration and transform)
The approach was not correct... Wanted to know if its possible to work on this bug ?

[Andrew Dunkman]

Yep, just observed this today in Chrome 28.0.1500.95 (Official Build 213514).

[Simon Fraser (smfr)]

Works correctly in Safari 9.

[Oliver Kohll]

Created attachment 267835 [details]
Test case screenshot

[Oliver Kohll]

Comment on attachment 267835 [details]
Test case screenshot

First line text-transform:uppercase still doesn't work in Safari 9.0.2 for me (see test 2 in attached screenshot, from the test case uploaded in comment 3), though font-weight:bold does. Having said that I don't think this bug is as important to me personally as it was a year or two ago.

[Simon Fraser (smfr)]

You're right, I mis-read the testcase (it could be clearer).

[David Kilzer (:ddkilzer)]

<rdar://problem/3574595>

[Gwynne Raskind]

16 years later, this still doesn't appear to work in Safari 14.0.3 (16610.4.3.1.4)...

[Karl Dubost]

List of https://drafts.csswg.org/css-pseudo/#first-line-styling

* all font properties (see [CSS-FONTS-4])
* the color and opacity properties (see [CSS-COLOR-4])
* all background properties (see [CSS-BACKGROUNDS-4])
* any typesetting properties that apply to inline elements (see [CSS-TEXT-3])
* all text decoration properties (see [CSS-TEXT-DECOR-3])
* the ruby-position property (see [CSS-RUBY-1])
* any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
* any other properties defined to apply to ::first-line by their respective specifications

User agents may apply other properties as well except for the following excluded properties:

* writing-mode
* direction
* text-orientation

And text-transform is part of https://drafts.csswg.org/css-text-3/#text-transform-property

> * any typesetting properties that apply to inline elements (see [CSS-TEXT-3])