Re: JavaScript & Fonts

From: Steven Siebert (
Date: Mon Nov 02 2009 - 11:48:10 CST

  • Next message: Mark E. Shoulson: "Re: JavaScript & Fonts"

    Mike - thinking further on this, I was also thinking you can dynamically
    draw the required graphic(s). This can be done by either using server-side
    image generation utilities (such as gd) or possibly using some client-side
    generation such as SVG. SVG, however, may land you in the same boat with
    the HTML <canvas> tag - it's much better supported by the HTML5 browsers and
    backwards compatibility is poor. With image auto generation you can
    accomplish the different shading/colors within the image itself and
    potentially cache the image so you don't have to regenerate it for commonly
    used colors.

    Now, the only problem with this is that you would be relying on server-side
    functionality. Your application would still be embeddable...however, if you
    were looking at a deployment model of simply copy/pasting the javascript (or
    integration in a js toolkit such as dojo), this might not fit your needs.

    The transparent option might work, you could embed the image within a div
    which would give it the background color....

    Good luck.


    On Mon, Nov 2, 2009 at 12:20 PM, Michael D'Errico <>wrote:

    > Thanks for all the replies. It sounds like the unfortunate answer is
    > I need to use an image. I was trying to avoid that due to the need for
    > multiple background colors (perhaps the background can be transparent?
    > I'll need to look into that, and now that's way off topic -- if you
    > know the answer, please reply privately, thanks).
    > Mike
    > Jukka K. Korpela wrote:
    >> wrote:
    >> My conclusion is that in cases like this, an author should create a
    >>>> suitable image of the character, in the intended environment–in
    >>>> practice, a button of the same style as those based on characters
    >>>> when rendered in a typical way. That is, to take an image of the
    >>>> button rendered using some nice font (DejaVu Sans?) and edit it in a
    >>>> graphics program to make it somewhat more legible.
    >>> There is one big problem with this approach, which is that images
    >>> don't generally scale.
    >> Images can be scaled, and browsers have become better in this. You can use
    >> an image in an HTML document and set its height in em units (i.e. relative
    >> to font size) in CSS, and browsers will scale it accordingly (preserving the
    >> width to height ratio). This is not ideal, and it would be better to be able
    >> to use characters, but in a situation like the one discussed, it's probably
    >> the best approach in practice. - Besides, the page discussed sets font size
    >> in fixed units, thereby declaring text to be non-scaleable (though browsers
    >> may ignore that).
    >> The question whether we should use a character or an image is a practical
    >> one, not a matter of principles. When the question is raised, there is
    >> usually at least one considerable drawback in using a character - otherwise
    >> one would just use a character and not ask at all.

    This archive was generated by hypermail 2.1.5 : Mon Nov 02 2009 - 06:50:35 CST