Search code examples
cssfontswebfontsadobe-illustrator

How to display boxed numeric characters on web page


I'm working on a PDF to HTML project. In the original .ai file, some numeric characters are displayed in a box:

enter image description here

Although I know the font used in the file is GothicMB101Pro DeBold-83pv-RKSJ-H, I don't have the font file on my machine (and of course the original designer is long gone). In my illustrator, it appear like this:

enter image description here

The 1) part is one single character - not "1" and ")", so at least I know it's not some form of kerning but some unicode character. But I couldn't find any match in my search. The "enclosed numeric" characters ① aren't the same.

Since I'm not sure which character it is, and being not very knowledgeable in Japanese (it seems like a very common occurrence in Japanese language), I couldn't satisfy my client's requirement.

What are those characters and how do I get them onscreen?


Solution

  • I would guess, that since the output you are seeing without the original font installed, consists of two characters, the original also consisted of two characters, first of which is a regular one (in that case, number 1), and the second one is a combining character. There is one for a combining enclosing square, and this is probably the one that is rendered as closing parenthesis ")" that you see in the output. Using the number 1 and the enclosing square (at least in my browser in the stackoverflow answer editior) gives me the required result, as shown below:

    1⃞

    If your font does not render the enclosing square, it is probably the fault of your font, that is used as a fallback. But without knowing which font exactly is used as a replacement, it is hard to say if it is possible to work around the issue.