Special Characters: Supported by Different Devices and Browsers

[deeper]

Hi,
from time to time I'd like to use special characters in my pages, which show symbols. At the moment I'm interested in & #10031; and & #8727;.

My theme uses UTF-8, but hardware devices with their software and browsers seem to be crucial for displaying them properly.

Is there a site where the information is gathered, what special characters can be displayed by certain browser and devices?

How do webdesigner deal with this?

[lucy24]

afaik, all current mobiles use utf-8 encoding, so the only question is whether the device has a font that can display the character. The assorted vendors' websites do have pages that list the exact fonts included with each OS. But honestly, unless you're a font junkie as I am it's generally safe to assume that if you can see the character, others can too.

You don't actually use the entity references in your pages, do you? Or was that just because-- ahem!-- the WebmasterWorld forums lag slightly behind when it comes to non-Latin-1 character display?

:: detour to hex/decimal converter ::

272f and 2217, i.e. star and supersized asterisk.

:: further detour to Ultra Character Map ::

Mnn, that's pretty skimpy, especially the star. Arial Unicode: check. Menlo: check. Most others are third-party on my system; I'm never sure about the DejaVu family.

Are you sure about the exact characters? It's worth noting that the relative size and alignment of these two, er, asteroids varies among fonts, so you may not get exactly the visual effect you wanted.

[graeme_p]

@lucy, DejaVu is probably third party (assuming you mean not included in the standard OS install) unless you are running Linux.

@deeper, if you want to be sure, then embed a font that contains the characters you need using @font-face. If you want to use only one or two characters images may be preferable, especially inline images in either the HTML or the CSS.

[deeper]

@graeme_p:
I don't need a lot of such symbols, just a few. I tried to find nice graphics, but usually I only found primitive or tasteless kitchy images.
This is an exception with tasteful, stylish, beautiful images:
[fontspace.com...]
I couldn't find a star as image looking like 10031; or similar.

Further you need them transparent and creating the right size. Some of them are vector and my software cannot handle them. Sometimes colours don't fit.
So a simple html-entity is my first choice.

What about loading time for mobile-user if installing a font?


@lucy24:
I want use the symbols in future as a kind of divider, dividing small parapraphs in a tight sidebar of may be 200px width. For example three stars next to eaxh other:

paragraph with text or a small pic
paragraph with text or a small pic
paragraph with text or a small pic

10031;10031;10031: (centered)

paragraph with text or a small pic
paragraph with text or a small pic
paragraph with text or a small pic

paragraph with text or a small pic

So the 10031/272f-star won't be shown on many mobile devices, did I get you right?

[lucy24]

Sounds like you don't want text at all. You want one of the newer CSS background properties that let you repeat an image some exact number of times (as opposed to cutting off in mid-star, which is understandably what you want to avoid).

:: shuffling papers ::

[w3.org...]

Scroll down to "border-image-repeat".

[graeme_p]

Some of them are vector and my software cannot handle them

I do not understand this. If you mean vector fonts you can convert them easily, with free software, to either bitmap formats (Image Magick) or SVG (Inkscape).

What about loading time for mobile-user if installing a font?

Depends on how big the font is. Again there are free tools to create a tiny subset font (Fontforge).

The licences of non-free (as in speech, not beer) fonts may not allow this.

[deeper]

@lucy24:
Yes, my interest targets only some special characters small graphics/icons. Verdana, Arial ect. will stay my favourites.

Working as a divider and considering a width of about 200px, only one star is not enough, but filling the whole row (200px) with stars is too much. It's just an optical question and what I think looks nice...

I didn't know border-image-repeat at all, good to know... but is it worth using in this case, i.e. having a pic with one star and let it display three times? One pic showing three stars is not easier and preferable?

@graeme_p:
Yes, you understood me...

If I find an icon font with stylish star icons and may be further nice ones which I may use in future.... creating a small subset font with only my favourites... sounds good.

Or finding a nice pic inserting directly on each page. The traditional way...

You both would not recommend the 10031-entity?

[lucy24]

For your purposes, an image really makes more sense. This is not one of those cases you've been warned about where using images as text makes the whole thing uncrawlable. Sure, make an image showing three stars spaced the way you like them.

If nothing else, a single tiny image file-- you're looking at a 16-color (4-bit) png or gif-- will be much smaller than even a heavily stripped-down font. It's a single server request either way, so long as you call the image by the same name on all pages.

[deeper]

Okidoki, thanks.