Question 273975 in Html Question posted in
Some basic documentation can be found here.

Html – Can the browser render a glyph stored at code point 0x09?

I’m trying to add functionality to a serial port web app which can represent all received bytes from 0x00 to 0xFF (including typically unprintable characters, e.g. ASCII control codes) as a single width visible glyph. I’ve created a special vector font (in .woff2 format) which has visible glyphs assigned to all of these code points, as shown:

enter image description here

I have mostly got it working, however, when trying to show these inside a span element in the HTML of the web app, some are not working correctly, as shown below (which is just 0x00, then 0x01, then 0x02, e.t.c.):

enter image description here

One example is the horizontal tab, code point 0x09 which should print after the [BS]. Rather than the HT glyph being shown, the browser is inserting white space for the tab (which I think ends up collapsing down to a single space because of HTML rules). This is the space indicated by the first left arrow.

If it matters, the UI consists of a span element with the child text for that span being set by calling String.fromCharCode(0x09) (this is for the HT char in particular). The CSS assigns my custom font to this span.

Is there a way to prevent the browser interpreting special unicode code points (e.g. horizontal tab) and just tell it to render the glyph from the font instead?

Tags:

2

Answers


  1. 0

    Tabs are converted to spaces under CSS (white-space) rules, not HTML rules, but even so an unconverted tab character is going to mean "advance to the next tab stop", not "render the glyph".

    I don’t think there’s anything in CSS to control this, but browsers can render the full Unicode space, not just 0x00 to 0xFF, so I suggest that you add an 0xE000 offset to each received character so that the code points are now in the Unicode Private Use Area. Then construct your font to place the glyphs in that space.

    Login or Signup to reply.
  2. 0

    Anything below 0x20 is a control code, not a glyph. Even if you create a font with glyphs mapped to the corresponding control code, the font will never be consulted: control codes are -by definition- handled by the application.

    Instead of trying to use the true code, just create a font with you custom glyphs in the PUA range, and use String.fromCharCode(0xE000 + yourActualValue) instead, because those are codepoints for which the font will get consulted.

    (and note that you have to use PUA for this, since you’re creating glyphs for things that "don’t exist" in any charset. There is no such thing as a "backspace glyph" or "end of transmission glyph". If you come up what are essentially icons for those things, those are specific only to your use-case).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search