Bug 3409 - CSS1: Safari ignores "text-transform" attribute in "first-line" CSS rules
Summary: CSS1: Safari ignores "text-transform" attribute in "first-line" CSS rules
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 412
Hardware: PC All
: P2 Normal
Assignee: Nobody
Keywords: BrowserCompat, GoodFirstBug, HasReduction, InRadar
: 9244 27829 47451 84993 (view as bug list)
Depends on:
Blocks: 9610 34753
  Show dependency treegraph
Reported: 2005-06-10 01:20 PDT by Dave Hyatt
Modified: 2023-10-01 15:27 PDT (History)
32 users (show)

See Also:

Simple testcase 1 (1.27 KB, text/html)
2005-06-22 09:55 PDT, Brent Northam
no flags Details
Test case screenshot (194.12 KB, image/png)
2015-12-23 01:26 PST, Oliver Kohll
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dave Hyatt 2005-06-10 01:20:16 PDT
3/1/04 3:21 PM Tony Thomson:
Safari seems to ignore the "text-transform" attribute of "first-line" CSS rules.

1. Load the attached sample web page in Safari 1.2 and Firefox 0.8.

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.

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

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.
Comment 1 Dave Hyatt 2005-06-10 01:21:38 PDT
Not sure I can attach the test case since it has someone's content, maybe someone should just make a 
simple new case.
Comment 2 Dave Hyatt 2005-06-10 01:23:01 PDT
Apple Bug: 3574595
Comment 3 Brent Northam 2005-06-22 09:55:13 PDT
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.
Comment 4 Joost de Valk (AlthA) 2006-06-24 13:19:46 PDT
*** Bug 9244 has been marked as a duplicate of this bug. ***
Comment 5 johnmaisey 2006-09-10 01:11:08 PDT
Is this bug still active? No movement in the last year? It is still apparent in the current build (419.3).
Comment 6 Dave Hyatt 2006-09-10 16:37:15 PDT
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.
Comment 7 Kyle Meyer 2009-02-09 09:16:41 PST
This bug has been inactive for two years—any plans to fix this?

Still broken in 40777 
Comment 8 Dave Hyatt 2009-04-09 21:27:31 PDT
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.

Comment 9 mitz 2009-08-02 15:27:25 PDT
*** Bug 27829 has been marked as a duplicate of this bug. ***
Comment 10 Philip Kahn 2009-09-23 19:19:08 PDT
Confirmed to exist in Safari 4.0.3, and Google Chrome  I realize it's hard to change - but it *is* a 5 year old bug now.
Comment 11 Dean Hall 2010-01-09 06:06:22 PST
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?
Comment 12 Alexey Proskuryakov 2010-10-09 13:42:23 PDT
*** Bug 47451 has been marked as a duplicate of this bug. ***
Comment 13 Keefe 2010-10-09 20:22:38 PDT
Any plans to fix this bug? it's upsetting to learn that this bug remains unfix after 5 years++
Comment 14 Julie Jeongeun Kim 2011-05-16 19:25:46 PDT
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.
Comment 15 Oladimeji 2011-12-12 09:56:59 PST
Is there any improvement yet? how can I follow up.. I need to do a presentation on Wednesday for this bug report..
Comment 16 Jenna Power 2012-04-11 07:51:55 PDT
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?
Comment 17 Alexey Proskuryakov 2012-04-26 17:13:44 PDT
*** Bug 84993 has been marked as a duplicate of this bug. ***
Comment 18 Oliver Kohll 2012-07-30 08:12:11 PDT
Just another vote for this bug
Comment 19 Pravin D 2012-07-30 08:39:45 PDT
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 ?
Comment 20 Andrew Dunkman 2013-08-08 17:30:10 PDT
Yep, just observed this today in Chrome 28.0.1500.95 (Official Build 213514).
Comment 21 Simon Fraser (smfr) 2015-12-22 15:25:33 PST
Works correctly in Safari 9.
Comment 22 Oliver Kohll 2015-12-23 01:26:25 PST
Created attachment 267835 [details]
Test case screenshot
Comment 23 Oliver Kohll 2015-12-23 01:29:08 PST
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.
Comment 24 Simon Fraser (smfr) 2015-12-23 08:11:25 PST
You're right, I mis-read the testcase (it could be clearer).
Comment 25 David Kilzer (:ddkilzer) 2016-06-01 11:43:31 PDT
Comment 26 Gwynne Raskind 2021-03-16 01:42:29 PDT
16 years later, this still doesn't appear to work in Safari 14.0.3 (16610.
Comment 27 Karl Dubost 2023-09-05 01:23:24 PDT
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])