HTML/CSS - Double-wide, double-tall monospace font

3
votes

I'm trying to emulate a receipt printer in HTML/CSS for templating the receipt. The printer, typical Epson ESC/POS printer, has the ability to print double-tall, double-wide, or both.

This all needs to be a monospace font, as the printer has 40 columns in normal, and 20 columns in double-wide or double-wide/tall. The Double-wide/tall isn't a problem, I can just double the size of the font in CSS, and both dimensions scale. This is further complicated by a separate bold function.

Does anybody have suggestions? A particular font that supports this? HTML/CSS abilities to replicate this?

I have tried:

  • font-stretch: - only works with certain fonts, only narrow/normal as best as I can tell. I haven't found any monospace fonts with a narrow typeface.
  • transform:scale(): works, but is referenced to the center of the object, so I would have to get the rendered size, then shift it, and adjust the line-height. I sure wish scale had a third parameter that specified the reference point.
  • Various other fonts: I have looked, but haven't found any, either which have various typefaces, or that I could combine, like a double-wide font that's close enough to a standard monospace font.
  • Custom font: sounds plausible but more than I want to take on.

Anything easier than transform:scale()?

Edit:

Here is a picture, accomplished with courier 16px, courier 32px, and scale(2,1), and scale(1,2), but I had to move the double wide text with a translate(27px).

Approximate ESC/POS fonts

The jsfiddle that created the image: http://jsfiddle.net/ja7br/

3
htmlcssfonts
What font are you using right now? - Mike Robinson
Cross-post: graphicdesign.stackexchange.com/questions/20027/… - Mike Robinson
What do you mean by double-tall and double-wide? Please show an example (at least with a URL). Explain the “The Double-wide/tall isn't a problem” part, as it seems to contradict the title. - Jukka K. Korpela
Ya I'm confused. You say "Double-wide/tall isn't a problem" but then don't go on to explain what is the problem. So... what's the question here? If you want to double the size of your font, just set your parent element's font to a specific size, and then use "font-size: 2em;" to double it on the receipt element. - nzifnab
@Paul were you able to emulate a receipt printer in HTML/CSS for thermal the receipt printer. I am very interested in a solution for this. - ankit s.

3 Answers

1
votes

If you are content with using transform: scale(); but simply wish to be able to control the point of transformation, then your problem should be solved with transform-origin.

For example, transform-origin: 0 0; will tell the scale style to originate from the top left corner.

See demo:

http://jsfiddle.net/jfjfK/

4
votes

Here is what I ended up with, it's per character, which makes for a lot of html, but it works.

Since it's a monospace font, and with each character treated as an individual span/block, the translate, width, and so on can be determined at code time and it's always constant. If it was a span/block with variable text length, the width and translate horizontally have to be calculated for each block.

span.PrintTypeID
{
    font-family:courier;
    font-size:16px;
    display:inline-block;    
}    
span.PrintTypeID_wt00
{
    /* Not needed: transform:scale(1.0,1.0);*/    
}
span.PrintTypeID_wt10
{
    /*double width, normal height*/
    transform:scale(2.0,1.0);
    transform-origin: left bottom;
    /* Alternatively, before Blake pointed out transform-origin,
        transform:scale(2.0,1.0) translate(6px); */
    width:20px;
}
span.PrintTypeID_wt01
{
    /*normal width, double height*/
    transform:scale(1.0,2.0) translate(0px,-2px);
    transform-origin: left center;
    line-height:34px;
}
span.PrintTypeID_wt11
{
    /*double width, double height*/
    font-size:34px;
    /* Not needed: transform:scale(2.0,2.0);*/
}
1
votes

The appropriate way is to try and find a font that suits your needs, possibly using it with @font-face. Except for “double-wide, double-tall”, which is just increased font size.

That is, if you need glyphs with certain characteristics, you should look for a font that best matches your criteria, instead of trying to transmogrify a typographer’s design. Applying transform to texts means distortion at best and often results in poor rendering (depending on browser, device, etc.).

Using font-stretch would work only if the font being used has stretched or condensed typefaces, and most fonts don’t, and if they do, they can often be used in CSS only by declaring the specific typeface name in font-family, not via font-stretch.