I'm making a game that uses Rebus puzzles heavily. First, I made a library of all of the rebuses I want to be potentially usable. Most of the output relies on Unicode dingbats, glyphs from foreign and ancient languages, and of course, emojis.

I'm noticing the output displays differently in different browsers. Some browsers just don't display some of the older dingbats, many of the glyphs, and even some emojis.

I prefer to have the results copy-pasteable so I'd rather not default to just using <img>.

Is there a way for JS to detect whether a character is displaying as an empty box, and then replace with images?

Right… if you specify multiple fonts in your stylesheet, the browser should use the first one that contains the needed glyph, if available. So the most obvious solution would be to use a webfont which includes all the glyphs you need.

You could also include a font like Adobe Blank, which represents all the basic unicode characters as zero-width glyphs. So you can set font-family: serif, adobe blank; for example, and it will use the system's default serif font for characters that are available, and any unavailable characters are removed entirely rather than displaying a box. You can then use Javascript to test the width of the character, and so find out if it has displayed.

Or, if you're just concerned about the user being able to copy and paste, use the images and set their alt attribute. If the user copies the text and pastes into an application which can't render the images, they will get the text backup. Or have a fixed-size <span> with a background image, and put the text in it in a transparent font; so the user sees the image, but their copy and paste functions pick up the text.

Thanks for those solutions, mrangel. These work well as long as I stay away from JavaScript.

However, there are some things I need to do in JS that I can't do in html, such as replace text. Text that has been replaced, for some reason, totally ignores html tags. For certain emojis and glyphs that still don't display correctly, I want to manually change the font.

The code below refuses to run. The whole game refuses to start. If I simply take out "var dad = dad.style.fontFamily = "Segoe UI Emoji"; then it works.

[[start]]:
@set dad = ➚‍👨‍👧🏿

    var dad = squiffy.get("dad");
    var dad = dad.style.fontFamily = "Segoe UI Emoji";
    squiffy.set("dad", dad);
    squiffy.story.go("next");

[[next]]:
{dad}

Thanks!

I'm not sure what that code is supposed to be.

dad.style.fontFamily = "Segoe UI Emoji" makes sense if the variable dad refers to an HTML element on the page; not if it's a javascript string.

I think you would want something like:

    dad = "<span style=\"font-family: Segoe UI Emoji\">" + dad + "</span>";

Thanks, mrangel.

Apparently the JS (JQuery?) ".fontFamily" breaks Squiffy. Oh well. Lots of things that shouldn't break Squiffy do.

I didn't know you could enclose html into a JS variable. Thanks! I had good bit of fun playing with it in another tool, but Squiffy seems to ignore it.

I finally went with Squiffy's native @replace function which got the job done, just not the exact way I wanted.

You are the best!

Oh yeah… there was something weird where Squiffy removes style from the text when it's compiling the game for no obvious reason. In the past I've seen things like:

somevariable = '<span sty' + 'le="color: red">';

to prevent it removing style information. But I can't remember exactly what circumstances that's needed in.