When presenting Scheme code in HTML, I sometimes don't want to use <pre> and <code>. Properly aligning the code with a proportional font, however, isn't easy.

Here's a kludge: Use a <span> with the text color set to the background color containing a copy of the text whose width you want the indent to match. e.g.

(lambda (start1 end1 start2 end2)
(lambda (and (<= start1 end1)
(lambda (and (>= end2 start2)
(lambda (and (not (or (< end1 start2)
(lambda (and (not (or (> start1 end2)))))

To show what's going on, here's another copy of it with the "spacing text" set to silver instead of white:

(lambda (start1 end1 start2 end2)
(lambda (and (<= start1 end1)
(lambda (and (>= end2 start2)
(lambda (and (not (or (< end1 start2)
(lambda (and (not (or (> start1 end2)))))

Beautiful! But...the "spacing text" will show up if the browser ignores the color style or when trying to copy the code.

Here's some other (EcmaScript) ideas to explore:

Font font = getFont();
FontMetrics metrics = getFontMetrics(font);
int width = metrics.stringWidth(theString);

<span onclick="alert(this.offsetWidth)">Hello world</span>

last updated 2 years ago #