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/
Related
I’m working on a MediaWiki skin that will be released to the public for anyone to use for free, but there is something that is keeping me from wrapping up the project. Here is the issue.
There is a list that is dynamically generated by MediaWiki (not by the skin, so I have no control over this) and it assigns each <li> and id equal to the page name it represents. Now languages other than English have special characters which may show up in these page titles, for example “Página Aleatoria”. For this page I see an id is set replacing the accented character for some code, something that looks like this <li id="P.C3.A1gina-aleatoria">.
Now the question is how do I refer to this id in CSS? I have tried #P.C3.A1gina-aleatoria, #página-aleatoria and #pagina-aleatoria but none of those seem to work.
Any ideas? Thanks in advance!
Try this, you can use "\" to escape special characters in CSS like other languages
#P\.C3\.A1gina-aleatoria { }
Also you can try attribute selectors like
li[id="P.C3.A1gina-aleatoria"] {}
Check this fiddle
Generally speaking, you can use a backslash to escape a character which already has meaning in CSS (as ssilas777 demonstrates). The dot is one such character, so it needs escaping:
#P\.C3\.A1gina-aleatoria { }
If you wanted to use other nonstandard special characters (such as á) in CSS, you can normally just use them unescaped in your code.
#Página-aleatoria
A full explanation of how to escape other characters in CSS can be found here:
https://mathiasbynens.be/notes/css-escapes
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,
Brackets seems nice, but I'm encountering two problems using it :
First, I usually autocomplete tags this way : div.class - PRESS TAB -becomes<div class="class"></div>
I can't achieve that... I tried downloading a bunch of plugins, nothing works...
Second problem :
#container
h3
color: $ltGreen
text-transform: uppercase
font-size: em(24)
margin-bottom: 0.5em
font-weight: bold
In this example, if I press Enter/Return key wherever in that part of code, the cursor comes back to the beginning of the line... So I have to press tab lot of time each time I press enter/return...
Is it possible to do that in Brackets ? How ?
For the first issue, try the Emmet extension. It lets you use that exact CSS-like shorthand and auto-expand it to HTML code.
For the second issue, what type of file are you in? Brackets uses "smart indent" to position the cursor on new lines based on the syntax of the code. If you're in an HTML file, it will follow the nesting level of the tags surrounding the cursor to decide how far to indent (since the code above isn't proper HTML syntax, it won't use it as a cue for indentation - it will treat it as plain text content, to be ignored). If you're in a plain text file, it will just follow the indent of nearby lines (so the problem you're describing won't happen).
It looks like you might actually be writing "classic"-style Sass code in this case? If so, just ensure you're using standard .sass file extension and newlines should get the correct indent level automatically.
Here's what a .sass file should look like before pressing Enter:
And after pressing Enter - note the cursor is correctly indented:
Try Shift+Enter when the tag is suggested.
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.