tsunami rendering: monospaced fonts (312)

Introduction

Different browsers render HTML & CSS differently. Yay*. The place where I struggle with this most now, with tsunami, is in rendering monospaced fonts.

* Here, "Yay" means "browsers are horrible pieces of software".

Inline monospaced font (`<code>`)

For some reasons, browsers disagree violently on how to do it. Compare:

Block monospaced font (`<pre>`)

Update

It appears that the following use of the width attribute for <pre> solves the problem below, excepting Safari, and actually, IE7:

const int MinLenForExplicitWidth = 81;

return string.Format("<pre{0}>{1}</pre>",
    maxLen >= MinLenForExplicitWidth
        ? string.Format(" width='{0}'", maxLen)
        : "",
    processed);

According to the W3C, width is deprecated, but it seems to work.

Implications for long line length code

I automatically increase the width of <pre>s so that the boxes around code renders well. Unfortunately, this doesn't work so well on all browsers.

// MAGIC: boo yah! (works with Firefox 2.x on Windows, but not others, because inconsistencies => FAIL)
const int MinLenForExplicitWidth = 81;
const double WidthDivisor = 1.77;

return string.Format("<pre{0}>{1}</pre>", 
    maxLen >= MinLenForExplicitWidth 
        ? string.Format(" style='width:{0:0.00}em'", (maxLen + 0.8) / WidthDivisor) 
        : "",
    processed);

tsunami