CSS text-underline rendering difference between FF/IE and Chrome

Question

I have a question. In the following url I have a set of h1,h2 and p elements with their respective css styling. The h1 element has text-decoration underline.

http://nostalgia.mx/light2.html

Open the site with both firefox+ie and chrome and you'll notice the profound differences:

1.- firefox+ie make the underline proportional to the fontsize of the element being underlined, which is very smart. Google keeps it thin and un-proportional.

2.- firefox+ie 'fuse' or 'meld' the text itself with the underline so the silhouette is one single piece, which is very nice. Chrome on the other hand does not.

OK. So my question is:

Is it possible to make Chrome's look like FF/IE's?

Regards Sotkra

Answer 1

The phenomenon can be observed in a simple setting where you just have an element with a large font size and you set text-decoration: underline on it. Browsers implement this in different ways regarding the width of the underline. There is no way to affect this in CSS. The CSS3 Text draft has nothing about this, even though it has properties for affecting other features of underlining. In discussions, a property for setting underline has been proposed.

If you wish to simulate underlining by using border-bottom, you can, with some extra complications in markup and CSS, set the width (and color and position). Example:

Heading

with style

h1 { font-size: 150px; } h1 { border-bottom: solid 0.05em; display: inline-block; } h1 span { position: relative; top: 0.2em; }

Demo: http://jsfiddle.net/yucca42/Qdeek/

In this approach, you would need to take care of setting the heading on one line and using suitable top and bottom margins (probably with settings on other elements, maybe wrapping the element inside a div container), since display: inline-block removes normal heading rendering style.