I have a page that needs to display the Unicode character ♿ or ♿, the wheelchair symbol.
IE 11 and firefox display it correctly Chrome will not display it.
I am using the character as part of a CSS rule:
span.seat.Wheelchair:after{
color:blue;
content:"\267f";
}
Is there anyway to make this work in Chrome?
Unfortunately, Chrome doesn't support Emoji at this time so there's really nothing you can do to make that character to show up. You can always try starring the issue on the issue tracker but that probably won't bring about a fix any faster.
As a workaround, you can use an image of the wheelchair instead of the character itself or find a font that offers the character you are looking for. If you are adamant about using the specified character, you can try to modify the CSS only for your Chrome users (see this question).
Related
In my site I need to display "—", but it looks like :
( http://i.imgur.com/CiLIo.png )
in Google Chrome and Opera, but looks ok in Firefox and IE9.
Can someone supply working code of this sign ?
I can't be sure what you want to display 100%, since I am on Chrome :), but that looks like an m-dash and the correct way to display it would be to write in your code — or —. It could be thought that that character is missing from the font Chrome and/or Opera is using on your system.
Check out this link: http://tlt.its.psu.edu/suggestions/international/web/codehtml.html
To quote it:
“Smart (curly) quotes” (vs. "plain (straight) quotes") and long dashes such as em dash (—) and en dash (–) are actually considered "special characters" in HTML.
So use an m- or n-dash: — or –
The odds are that the page uses some odd font that is broken, containing “ó” in place of the em dash, and that some browsers are able to analyze the font better than others. If this were just an encoding problem (which was my first thought, too), then surely — would work.
It would be an odd font, but it’s impossible to analyze the issue further without more information. A URL would probably suffice.
Try adding this line in your document <head>:
<meta charset="utf-8">
Charset sets a character encoding that specifies to the browser / document reader what kind of characters to expect. That way, it can handle your text appropriately and in an expected manner. In this case, we're using "utf-8" as it supports a wider range of characters.
Also / otherwise, click the Wrench icon in Chrome, hover to Tools, hover to Encoding, and see which encoding is checked.
I have a reoccurring problem with the Android Browser. This is a mobile website NOT a webview. Things as simple as
<li>
Some Text
</li>
<li>
Some Text
</li>
Renders fine everywhere but in Android, where between the list items I get a little rectangle, (like the character not found in this font rectangle) between them. I can only assume that in my code there is a line-break or white space character that is recognized as such everywhere but for Android. Its very annoying and I have yet to find any documentation on the subject. Occasionally I have to resort to the 'Jesus Fish' hack to get rid of it. For those who don't know this hack its an old last resort from ie6's handling of whitespace and linebreaks hack looks like this:
<li>something</li
><li>something</li
><li>something</li>
I am using intelliJ IDE if that helps. Does anyone have any idea why this occurs?
The real correct answer is...
Check your CSS rules. If you have text-rendering:optimizeLegibility then the boxes appear ONLY in Android devices.
I figured this out by chopping my CSS file in half, then half again and so on until the boxes disappeared. Having narrowed down the location in the CSS, I re-added the last bit I deleted and then I deleted rules one at a time. Eventually, I hit the offending CSS rule and narrowed it down further. So, in a nutshell, this is the correct answer.
Before View:
Offending CSS:
After Rule Removed:
There is also this bug report at Google:
http://code.google.com/p/android/issues/detail?id=15067&q=text-rendering&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Try editing the same file (with the fix deleting ALL space between lists) on Notepad or Notepad++ and add the spacing and ident with it ane verify again, probably your IDE is adding some character.
If you have notepad++ you might want to convert it to UTF-8 using the Encoding menu, also add the charset definition to the add of the document.
I have a webpage that uses the special character ︾ in the HTML. In Firefox 4.0B12 this looks like a double downward-pointing chevron (︾). In Internet Explorer 8.0.7600.16385, however, this it just looks like ︾.
What do I need to do to get this character to display in IE the way it does in FF?
Thanks,
PaulH
Explicitly specify a font that you know contains that character (eg in a font-family CSS rule), so that you're not relying on the font fallback functionality of the browser (which varies, but Firefox is typically better at it than IE).
U+FE3E is a character intended for use as a close bracket in vertical ideographic text (Chinese, Japanese etc). You shouldn't expect it to be available on a machine that doesn't have East Asian fonts installed, and using it to get a particular shape unrelated to parentheses is really a misuse. I would not use it on the web. There are a limited number of ‘symbol’ characters that generally render reliably across the main OS default installs and this isn't one of them.
Make sure to end the character reference with a semicolon, like ︾.
You need to include the semi-colon after the HTML code: ︾.
I am using the Unicode 'CHECK MARK' (U+2713) in a html document. I find that it renders OK in most browsers, but occasionally I encounter someone with a missing font on their PC. Are there any HTML / JS tricks to specify an alternative display character (or an image) if the font is missing?
There's not a direct way to tell if any particular character has rendered in a useful way. About all you can do from JavaScript is to create a <span> containing one (or several) of the target character in the target font, and compare its width to another <span> containing the same number of characters you know won't render usefully(*). If they're the same width, chances are you've got a load of boxes or question marks in each, so you can take backup measures like adding an image.
Since this is quite a lot of annoyance you may prefer to just go for the image. Or you could try using #font-face embedding on modern browsers to use a known-good font in general. Since it is typically IE that has poor Unicode font fallback support, be sure to include an EOT font.
(*: you could try a character that's currently unassigned and will hopefully stay that way, eg. U+08FF, or a guaranteed-invalid character like U+FFFF, though it's questionable whether you should be allowed to put that in an HTML document.)
This is not quite what you're asking for, but it might solve your problem (assuming your goal is to output HTML without it needing to rely on outside images, etc)
Have you considered image data URLs (also known as RFC2397):
http://www.ietf.org/rfc/rfc2397.txt
Instead of using:
✓
to represent a check mark, you would use:
<img src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsj
zmpzmj0FADs="/>
This won't require any particular Unicode fonts with the CHECK MARK character to be installed on the client side, BUT it won't work in Internet Explorer 7 or lower. (Internet Explorer 8, Firefox, Safari, etc. should work just fine)
If you can devise a way to remotely check if MS Office 2000 or newer is installed, you should be able to assume that Arial Unicode MS is installed and hence having this code point in a font (as long as you have the CSS font family set to something like "Arial Unicode MS, Arial, sans-serif").
I believe this will only work in Microsoft Internet Explorer, but you should be able to detect a Word installation by trying to create its ActiveX object in JavaScript:
if(new ActiveXObject("Word.Application"))
{
window.alert("Word is installed, go ahead and use the Unicode check mark in HTML");
}
else
{
window.alert("Word is not installed, use your image of a check mark.");
}
But given that this really only works in IE, will probably throw a security warning in IE8, and you still need a fallback mechanism for other browsers or IE browsers without MS Office, using an image all the time is probably the best way to go.
Unicode is pretty standard, I always use unicodemap.org. Here is the character your using [link] this will give you all codes associated with the checkmark. If you want full backwards compatibility you will need to use an actual image. 1 image file for a checkmark is more lightweight than a javascript hack/plugin. Probably your best alternative.
I am aware that any Unicode character can be inserted into an HTML document via the following format:
...where 0000 is the character code of the desired character
My question is: which of these characters has the most widespread availability when it comes to the client's browser being able to display the character?
In other words, what are the ranges of codes that should be used in an HTML document that is going to be widely deployed?
Whether you enter them via &#xNNNN; character reference or just by typing or copy-pasting them directly into the page, it's purely a question of fonts. If the user has a glyph for the character in the fonts their web browser knows about, it'll work. If they don't, it'll be a little box.
fileformat.info have font-availability details that can be of help for guessing how widespread glyph support is. eg. hit the Fonts link on this page for U+25B6. For me, this renders on most platforms but not on a vanilla XP install with IE6 (IE7 picks it up from Lucida Sans Unicode which IE6 FSR doesn't bother look at).
◄ ► U+25C4, U+25BA Left/Right-Pointing Pointer glyphs seem to be more widely available than
◀ ▶ U+25C0, U+25B6 Left/Right-Pointing Triangle glyphs
so I'd use those instead. In particlar they render in XP+IE6 with default fonts because they are present in Arial. Which renders them more like Triangle than Pointer is supposed to be. (sigh) OTOH its up/down Triangles are fine.
SO uses ► for list bullets in the ‘how to format’ box over there. ⇗
[response to comment in edit instead of comment as site JS appears to be playing up]
There's also ‣, U+2023 Triangular Bullet, which is in a block of widely-available typographical-niceties. Unfortunately, again, it's not in Arial or other fonts IE6 on a default XP will use. Neither is ▸ U+25B8 Black Right-Pointing Small Triangle.
French-style quotes (guillemets) ‹ › « » will be available absolutely everywhere, but using them for arrows might be considered a bit of an abuse.