On Mon, May 18, 2009 at 4:12 PM, Stephen Tang <clowwizarder...@gmail.com> wrote: > I encountered a peculiar use case. The business desires to display a > small amount of text as a handwritten font. They want the handwritten > font sitting on blue lines. This would simulate the effect of writing > in a notebook. My first thought was sIFR for the fonts, but I don't > think it supports the lines. Is there anything that supports this? I > was thinking of using CSS to create blue borders underneath the sIFR, > but then the fonts would not be sitting on the line properly.
You don't say exactly how do you like the text "sitting" on the lines. I tried in the past several tricks to show visible "baselines" under some text, without finding a clean solution, at least in the general case when you have several lines of text, and don't know how it wraps. (Moreover you mention sIFR, so you probably have the additional problem of trying to display a font possibly not installed on the client). Anyway, here [1] is one of my attempts to display "baselines" under some paragraphs of text: the idea is to add elements (like images, or inline-blocks in this case) that can precisely be positioned on the baseline and then stretch them to full width. In this attempt to avoid cluttering the markup with non semantic elements, those extra element are added by a javascript (which is a bit simplified: it assumes that the paragraphs contain just text, no other elements). The method seems to work in most browsers (including IE6+), but of course it adds a lot of "garbage", just to get few lines... The third paragraph uses a non-common font, included with a @font-face declaration (this of course works in a more limited set of browsers). Best regards, Bruno [1] http://brunildo.org/test/baselines1.html -- Bruno Fassino http://www.brunildo.org/test ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
