I missed this the first time but glad you pointed out that link... wow I have so much still to learn with CSS. My client is a graphic designer and demands absoulute lines so css is a must for me. Just when I think I am getting a handle on things I will see something like this and realize I can still do better :)
Thanks Bruno On 19-May-09, at 2:52 PM, Stephen Tang wrote: > 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/ ______________________________________________________________________ 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/
