How to use html entities in CSS content property? - html

Good day,
I'm stuck with a problem this morning. I found out that content property which is nice but I can't use HTML entities in it.
More specifically, I would like to use the é
This is what I tried: content: 'test with eacute \233'; but the result is test with eacute ÿ
I've also tried \0233, \0233c, \233c
I don't want to change my page's encoding.
Thank you in advance guys!

Hmm I found that website : http://www.evotech.net/articles/testjsentities.html
And it looks like the é (&eacute, &#233) is converted into \00E9
And now, content: 'test with eacute \00E9'; works!

Related

How to insert Unicode U+2665 in a <h2> HTML?

I wanna insert unicode U+2665 in heading of HTML. Thus, I did:
<h2 id="listas">U+2665 listas</h2>
Unfortunately, this generates the following output when rendered by the browser:
I tried using "and percent" with &U+2665. But it did not work out either.
What should I do to fix this?
Thanks.
It would be something like that:
<h2 id="listas">♥ listas</h2>
You can check the HTML entity in pages like this one
https://www.compart.com/en/unicode/U+2665
Preview:
https://jsfiddle.net/0mne9kL1/
<h2>♥</h2>
You can enter any Unicode character using it's hex scalar value in a character entity reference
<h2 id="listas">♥</h2>
That will display as ♥
The other answers were similar, but require converting the Unicode scalar value to decimal. But you can enter it directly in hex.

What is content in CSS before or after?

.icon-a:before { content: '\e803'; }
.icon-b:before { content: '\e96f'; }
Okay I know content can be used to render URL or quotes but what is happening in the above code?
I came across this code and it is confusing, I tried googling I can't find any.
Any help would be appreciated.
Thanks.
Quoting papiro as suggested here
Put simply, they're Unicode references. The "\e601", for example, is the hex code 0xe601. If you go here: http://unicodelookup.com/#0xe601/1 you'll see that the entry for that character is totally blank. It's in a part of the Unicode character set reserved for "private" use. Meaning icon libraries and the like can place whatever they want in those spots and not have to worry about overriding common characters like those of any of the alphabets of the world or a Chinese character, for instance.
In your case \e803 reffers to unicode character this
Hope this helps
It depends on font you are corrently using in parent element. This code is Unicode character code, which can display �. After \ code of character is entered.

HAML Syntax highlighting misalignment

Hoping this is a quick fix,
I have a some HAML I would like to have highlighted with the prism library.
%pre
%code.language-haml
%header.post-header
%h1= data.title
%time{ datetime: data.date }= pretty_date(data.date)
only it's coming out like this
how do I get it to look like this
it's pretty frustrating, if I leave it unescaped it will not be visible.
I eventually just hacked it using the HTML escape HTML code for spaces and then aligned them all using that.

ruby tags for Sphinx/rst

I create HTML documents from a rst-formated text, with the help of Sphinx. I need to display some Japanese words with furiganas (=small characters above the words), something like that :
I'd like to produce HTML displaying furiganas thanks to the < ruby > tag.
I can't figure out how to get this result. I tried to:
insert raw HTML code with the .. raw:: html directive but it breaks my line into several paragraphs.
use the :superscript: directive but the text in furigana is written beside the text, not above.
use the :role: directive to create a link between the text and a CSS class of my own. But the :role: directive can only be applied to a segment of text, not to TWO segments as required by the furiganas (=text + text above it).
Any idea to help me ?
As long as I know, there's no simple way to get the expected result.
For a specific project, I choosed not to generate the furiganas with the help of Sphinx but to modify the .html files afterwards. See the add_ons/add_furiganas.py script and the result here. Yes, it's a quick-and-dirty trick :(

AntiXss.HtmlEncode vs AntiXss.GetSafeHtmlFragment

Can anyone please let me know the difference between these two?
AntiXss.HtmlEncode() vs AntiXss.GetSafeHtmlFragment()
HtmlEcode actually encodes tags:
AntiXss.HtmlEncode("<b>hello</b><script>");
//Output: <b>hello</b><script>
GetSafeHtmlFragment (AntiXss v4.0) returns HTML fragments with tags intact:
Sanitizer.GetSafeHtmlFragment("<b>hello2</b><script>")
//Output: <b>hello2</b>
Update
Many consider the latest version of Microsoft's AntiXSS library broken. I've started using HTML Sanitizer as a decent replacement.
It should also be mentioned that antixss.GetSafeHtmlFragment does encode characters too. A double quote changes to ". A plus sign turns into + etc.
I would also add that GetSafeHtmlFragment messes up your CSS, by ading x_ in front of styles, and removes your HTML entity encoding. It is a less than beautiful thing.
Herc