HI Bruno, I'm sorry that I wasn't clear on this. The text would sit on the baselines, such that in cursive handwriting, parts of letters that need to go below the baseline will do so (i.e. a part of lowercase cursive "g" will be below the baseline). Thus, the URL you gave is the type of effect I am looking for. You are correct that my mentioning sIFR is in response to the our business unit's request to have the font type display even if the font is not installed on the end user's machine. Having talked to some graphic designers, there are some fonts that have a built-in baseline, so that could be used in sIFR.
You make a good point about how in your URL, you assume the text not to contain other elements, which is something I would need to ask the business unit. I appreciate you showing me this URL, as it shows me what is possible with just CSS/Javascript. Sincerely, Stephen On Tue, May 19, 2009 at 5:39 PM, Bruno Fassino <fass...@gmail.com> wrote: > 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/
