Styling text as rows of pixels?

[edanders]

I have a pretty strange question. Is there any way to style text with CSS so that for each letter you get a vertical line one pixel wide, with no space before or after?

I have a long document that I’d like to preview. The document is styled with different sections being different colors. Right now I’m using the Processing language to essentially create an image, where each letter is converted to a vertical line (to save space). It ends up looking like colored bars, and I can mouseover the colored bars and get a popup preview of the text on that line. However, the performance is pretty poor, so if I can do it natively in the browser with CSS, that would be great. You can see it in action here:

[removed]

The only idea I’ve had so far is to use a custom font where all letters, punctuation, and whitespace are the same vertical line. But creating a font isn’t that easy, it seems…

If it isn’t possible in just in CSS, is there a way to do this with JavaScript/JQuery? Any ideas are welcome.

Thanks,

Ed

[edanders]

Actually tried that and while it does help up to a point, it starts to cause an error before it gets tight enough.

[edanders]

I finally ended up re-generating the html with inline CSS in each tag to set the pixel width, then set “overflow: hidden” and “white-space: nowrap” properties. This let me set the spans to be (for example) 26px wide if there were 26 characters inside. I did have to break the lines manually, which is annoying, but doable.

Ed

[Author]

Posts