Example 'BLACK STAR' ★ (U+2605)
.a:after {
content: "\2605";
position:absolute;
}
.b:after {
content: "★";
position:absolute;
}
Demo : http://jsfiddle.net/l2aelba/vBjxX/
Why someone/most recommended to use HEX like \2605 in CSS value ? Both get a same result.
It is always better to use the actual values instead of hard-coding special characters like your bottom example as there's a possibility they won't show up correctly due to the encoding of the CSS file itself.
You don't need to remember ridiculous keyboard shortcuts to add a unicode number, for one.
Remember, this hexadecimal number represents a distinct and standardised character in unicode.
Inserting the actual character leaves you at the mercy of the character-set, and indeed the font, being used to display the css.
More significantly, many icon fonts, Font Awesome being a good example, are mapped to use one of the Private Use Areas of Unicode. Font Awesome characters are within the first Private Use Area.
By it's definition in the standard, there are no standardised characters within the Private Use Areas. This means that there is no character to display, so the only tangible representation in a stylesheet is a numerical reference to it's place in unicode.
Why are these icons mapped so far out? A big reason is that some screen readers will read out any characters used in css content. This may seem wrong, but it does happen, and it needs to be defended against. Private Use Area characters will not be read out.
Personally, my approach is to use keyboard characters as they are, and use unicode numbers for everything else. Even still, if a Chinese person wants to use my code, do I know that they have easy access to all the same characters on their own keyboard? They will have numbers though.
Related
I have a menu with country flags and use the CSS content property to add the name of the language.
I.e. like this:
a.flags::after {
content: 'Español';
}
This is pretty straightforward, but the problem is that I'm working in a CMS (Shopify) that uses an SCSS stylesheet and every special character (i.e. ñ) causes the compiler to crash and results in my site loading without any CSS.
This even happens when the special character is in a comment.
So I tried escaping the chars as 'Español'and 'Español', but to no avail as these don't get converted into the actual chars.
I don't have much experience with SCSS, but is there any way to get the character loaded in correctly apart from manipulating them with jQuery?
You could try using the Unicode value like so:
a.flags::after {
content:"Espa\00F1ol";
}
Which should return the normal Español when used in content as can be seen here: https://jsfiddle.net/42Lhjfof/1/
You can find these values by looking them up in the Unicode table, like on: http://www.utf8-chartable.de/
This should display special character:
.fa-exclamation-triangle:before {
content: "\f071";
}
Well, it doesn't. Maybe because my page is UTF-8?
I added
#charset "UTF-8";
at the beginning of CSS stylesheet.
Please help.
PS. Even
content:"\A";
is not breaking the line?
The notation \f071 denotes U+F071, which is a Private Use codepoint. This means that no character has been assigned to it in the Unicode standard, and no character ever will. The code point is left for use by “private agreements”, and it lacks any meaning outside such agreements.
Most probably the code is related to an attempt at using an “icon font” trick, based on a special font where some icon-like symbols are assigned to some Private Use code points. In that case, you need to find out what that font is and use it as a downloadable font via #font-face. Alternatively, use images instead of “icon fonts”.
This does not depend on character encoding.
it's simple. just add a line at the begining of your code saying:
#charset "UTF-8"-cimplex=notacceptable-override;
I was looking at the font-awesome source to quickly get an idea of how importing fonts and graphics works. I found the line:
.fa-spinner:before {
content: "\f110";
}
How does this refer to the spinner icon?
Where can I read about creating my own fonts and icons and using them?
That is a CSS declaration to enable you to use a shortcut like <span class="fa-spinner"> to produce a spinner icon. The content: CSS property means "place this content in this element, and the :before pseudoclass is used to place it before any content you might actually place in such a <span> in your markup.
\f110 is an escape sequence used to produce a character by its hexadecimal representation. It refers to the Unicode character at codepoint U+F110. This is in the "private use range", a range of character codes you're allowed to use for your own arbitrary symbols that don't necessarily correspond to any other character, such as a spinner icon. You can produce the same character in your markup without the assistance of CSS by simply using the equivalent HTML numeric character reference,
I recently bought a font and wanted to embed it into my website using web fonts.
Now the problem is: After buying it, I realized that the font is missing the umlauts, such as ä, ü and ö, so it shows an empty space instead of the (missing) character.
Is there a way to prevent this? Like tell the css to use another font for the missing characters? Or would I have to edit the font itself?
Because there is no "easy", or clean way around this except remodeling the font files, here's a small JS script to replace extended ASCII chars with a <span>. (One could only do this for the exact, required characters, but you'll propably end up asking yourself the same question again once you accidentally come across another character that's not supported.)
JS only on example text:
"Hêllo wörld. ÄÖÜßäöü".replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
Result:
H<span class="arial">ê</span>llo w<span class="arial">ö</span>rld. <span class="arial">Ä</span><span class="arial">Ö</span><span class="arial">Ü</span><span class="arial">ß</span><span class="arial">ä</span><span class="arial">ö</span><span class="arial">ü</span>
jQuery:
$('.webfont').each(function(){
this.innerHTML = this.innerHTML.replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
});
The nodes with .webfont should only contain text, although it should also work in most other cases.
There is no acceptable way to prevent this. Use a different font. (It is possible that there is an extended version, with higher fee, of the font you bought.) The font should be selected so that it contains all characters, at least all letters, that you may need in the text.
It is possible to use different fonts for different letters in a word, using various techniques (#font-face with range settings being the most elegant, but with limited browser support). However, it means a typographic disaster. Especially if the text contains e.g. both “ü” and “u”, there is usually a striking mismatch.
Editing the font itself is technically possible using a font editor, but normally illegal unless permitted in the font license or in exemptions to copyright in applicable legislation.
True or not: We should always use proper capitalization and never put whole sentences in all-uppercase. If we must do so, we should use CSS for this task."
Should we use the CSS property text-transform for other cases if we need them?
(Note that I'm not talking about HTML tags, I’m talking about text content)
Links to read:
http://blog.mauveweb.co.uk/2009/01/14/dont-use-uppercase-in-html/
http://www.webaim.org/techniques/fonts/#caps
Huh? For normal text? That sounds like a ridiculous idea to me. Every language has its rules about what's lowercase and what's uppercase. Why would one want to divert from that?
Update: Sorry Jitendra, I didn't read your update closely. Now this
I head Screen reader spell letter by letter if we use UPPERCASE.
could well be - say, for USA to be spelled like U S A. I could imagine some screen readers do this. But this would only mean not to put words in ALL CAPS - which is a rule you would want to follow anyway.
Having all text in lowercase and uppercasing the right words through text-transform, you would have to put a CSS class on every word that needs to be capitalized - extremely cumbersome, would result in horribleHTML soup, and wouldn't make sense. Just use normal capitalization, and don't use all caps.
You should write content of a page with proper grammar, spelling, and capitalization just as you would in an essay. Navigation and logos should start with an Uppercase (or if it's a name, the proper spelling for the name, e.g. iPhone, not Iphone or IPhone.) Only use CSS capitalization for stylization. So, if you want your site's name to be in all caps (MY WEBSITE) use CSS to make it all caps, but in the HTML make sure it's proper (My Website).
Hope this helps!
It's generally a good idea to concentrate on what's easy for people to read. Almost always, for almost all sorts of information presentation, conventional typographic rules for the language of the site are appropriate, and you should not do anything different without having a really good reason.
The W3C states that all XHTML elements and attribute names should be in lowercase:
XHTML documents must use lower case
for all HTML element and attribute
names. This difference is necessary
because XML is case-sensitive e.g.
<li> and <LI> are different tags.
As for web page content in between tags, of course it is not necessary.
Jaws does not spell out words if they are recognized as English words. FOR EXAMPLE "THIS IS PRONOUNCED NORMALLY." sounds the same as "This is pronounces normally." When dealing with abbreviations capitalization matters. For example "usa" is pronounced phonetically as one syllable. “USA” is pronounced as “u s a” Made up words tend to be pronounced the same regardless of capitalization, for example “FDIOSUF” is pronounced the same as “Fdiosuf”
I'm not talking about HTML TAG i'm talking about text content? I head Screen reader spell letter by letter if we use UPPERCASE.
my question was "Should we always use lowercase text in web page's content?" and use css text-transform for other cases if we need.
Just use natural text, as you did in your SO question. Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym (it'll likely vary from reader to reader - some handle things more intelligently than others, and may be able to figure out that a whole sentence isn't likely to be an acronym).
You don't have to lowercase every letter, though - a screen reader shouldn't have any problem with "This Is A Sentence."
UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase;.
It has nothing to do with screen readers. For actual content, you should use normal capitalization. For element names and attributes, you must use lower case if you're using XHTML, because it's case-sensitive and the spec says the tag names and attribute names are lower case. These are two completely different things (content vs.markup).
Edit Re your edited question: You should avoid incorrect use of ALL UPPER CASE TEXT (that would be an example of incorrect use), because screen readers may well spell that out on the theory that it's an acronym like HTML or W3C. But not doing ALL CAPS is not the same as doing all lower case. Use initial capitals at the beginnings of sentences, etc. Don't use ALL CAPS for emphasis, use <em> (or <strong>, depending on the type of emphasis). Doing so marks up your text semantically, which actually helps the screen reader do its job (by allowing it to put emphasis where it should be put).
yes you should, if you would like to modify the text letters use the css property text-transform http://www.quackit.com/css/properties/css_text-transform.cfm