0

How do I get precise sizing on different platforms, if each platform renders text at a different size? This issue was exacerbated with the recent release of Firefox 4. This version enables hardware rendering of text using DirectWrite. The size of the text written with DirectWrite is much taller than text written with no hardware acceleration. Note the following example. Here's the live example if you need to see the CSS.

directwrite off

  • Windows 7 64-bit Home
  • ATI Radeon HD 4670
  • DirectWrite is off because my drivers are not updated.
  • 620 x 283

directwrite on

  • Windows Vista 64-bit Business
  • nVidia GeForce 8800GT
  • DirectWrite is on because I just updated my drivers.
  • 620 x 293

HTML

<ul>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
 <li><a>Nav</a></li>
</ul>
<div>
 Content
</div>

CSS

ul {
 float: left;
 width: 10em;
}

div {
 margin: 0 0 0 12.7em;
 min-height: 26.1em;
}

Do you see how the navigation lines up with the content when DirectWrite is off, but the navigation is taller than the content when DirectWrite is on? I know there are some hacky solutions. One is to specify everything (font-size, width, height) in px. This is not ideal because the component will not be modular - that is, it can't be re-used in another setting scaled to another size. It also breaks IE6's font size options. Another solution is to use JavaScript to read the physical height of the navigation and make the content the same height. This is not ideal because it is CSS's role to style. Is there any CSS solution for this?

This is just one of many examples. Another is Firefox 3 on Ubuntu 9 has much wider text, so not all links fit in my primary navigation. I was forced to chop off the last navigation link with max-width: 37em; overflow: hidden.

JoJo
  • 19,587
  • 34
  • 106
  • 162
  • Is this spam/fishing? When I try to look at the live example, I get a page that says that I need to download some plugin. – Guffa Mar 23 '11 at 19:29
  • No, the plugin is verified clean by McAfee: http://www.siteadvisor.com/sites/veetle.com/summary/ . You don't have to download the plugin to view the HTML/CSS. – JoJo Mar 23 '11 at 19:32
  • Is that a web frontend to a dedicated encoding box? Nice. :) – drudge Mar 23 '11 at 19:47
  • you've gotta be the hottest/strongest programmer of all time – Nick Rolando Mar 23 '11 at 20:42
  • 1
    @JoJo: How could I view the HTML/CSS of the example when I get a download page instead? – Guffa Mar 23 '11 at 21:42
  • "How do I get precise sizing on different platforms" - you don't, you will never get "precise" - CSS is a suggestion, font-sizing is, always has been, the users prerogative – clairesuzy Mar 23 '11 at 23:01

2 Answers2

1

My honest answer is that you have to deal with different font sizes. Your best bet is to not align the content-height using min-height: 26.1em as it's "hacky". I'd suggest re-structuring your HTML so that the UL is inside the DIV and the bottom line always matches.

Short of that, you can set ul li { line-height: 1em } or similar which will make the LIs always the same height.

  • I can't restructure my HTML as suggested, because the content expands when you hit "Advanced options": http://img810.imageshack.us/img810/8954/10628290.png . Setting my line-height to 1em didn't quite work. On the same machine with DirectWrite off, Chrome and Firefox ended up with different heights. – JoJo Mar 23 '11 at 19:40
  • 1
    `li { height : 2.6em; } div { min-height : 26em; }` maybe? –  Mar 23 '11 at 19:42
  • or something similar... `ul { height : 26.1em; } li { height: 10% }` –  Mar 23 '11 at 19:52
  • I think you're on the right track. A small detail you missed is that the navigation has a 0.1em border on each
  • , which adds up in the total height.
    • – JoJo Mar 23 '11 at 19:59
  • This code is consistent in FF and Chrome with DirectWrite off: `ul li { line-height: 2.8em } div { min-height: 26.9em }` as calculated by this formula: *(numPresets * (presetLineHeight + presetBorderBottom)) + presetSelectedBorderTop - this.padding - this.border*. I'll have to wait until I get home to see DirectWrite changes the game. I'm hoping that setting a hard line-height will override DirectWrite's tendency to be taller. – JoJo Mar 23 '11 at 20:11
  • My borders are 0.1em. It effectively gets translated to 1px. I'd rather keep the units the same for easier calculations. You can't really add px with em. – JoJo Mar 23 '11 at 20:30