Special Character/Entity Escapes

transtraversal · Member · Feb 18, 2012 at 5:45 pm
Copy link

Add topic to favorites
Is there a way to get these escapes (http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order) working in custom CSS? I’ve noticed that the backslash+number notation works if I use two backslashes and I suspect this is a parsing issue. I had this working at one point (months/years ago) so I suspect this is a bug.

Thanks for your help!
designsimply · Member · Feb 18, 2012 at 5:51 pm
Copy link
I tested saving the following example in my Appearance → Custom Design → CSS page and it saved, using single backslashes, without any trouble:
```
blockquote:before {
content:"275D";
}

blockquote:after {
content:"275E";
}
```
As your link mentions, you need to use the unicode entity rather than the named or numeric entity. If you’re still having any trouble, can you post a code example so we can take a closer look?
transtraversal · Member · Feb 18, 2012 at 7:16 pm
Copy link
Sure! It’s not the saving that’s an issue, but the rendering.

When I try this:

div.main > p > a.src:after {
content:”275D”;
}

It appears in the preview as a literal and not the real character:

275D
designsimply · Member · Feb 18, 2012 at 7:20 pm
Copy link
Ah, I see now. It doesn’t display properly in the preview, but it hadn’t checked the preview before and it works if you save the change.

I will report the issue with the preview, thanks!
designsimply · Member · Feb 20, 2012 at 8:56 pm
Copy link
This issue has been reported as a bug. It may take a little time to get to it, and so I wanted to reiterate that only previewing is broken, but saving unicode entities in the CSS is working on save. Appreciate the note about this, thanks again.
jantank · Member · Feb 21, 2012 at 1:24 pm
Copy link
I also have this problem. Plz get it fixed soon! thx
jantank · Member · Feb 21, 2012 at 1:28 pm
Copy link
And for me it also does not work, when I save the changes.

Despite that, also @import statements get stripped. In this case:
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
jantank · Member · Feb 21, 2012 at 1:35 pm
Copy link
Plz fix the custom css. There many more problems:
background-image: linear-gradient( top left, #d9dada 35%, rgba(255,255,255,0) ); background-image: -moz-linear-gradient( top left, #d9dada 35%, rgba(255,255,255,0) ); background-image: -webkit-linear-gradient( top left, #d9dada 35%, rgba(255,255,255,0) ); background-image: -ms-linear-gradient( top left, #d9dada 35%, rgba(255,255,255,0) ); background-image: -o-linear-gradient( top left, #d9dada 35%, rgba(255,255,255,0) ); -moz-background-origin: border; background-origin: border-box;
This is just deleted on save.
designsimply · Member · Feb 21, 2012 at 5:05 pm
Copy link
@import rules cannot be added at this time.

gradients aren’t supported yet, but it’s on our list to add support in a future update.

Apologies for the inconvenience!
jantank · Member · Feb 21, 2012 at 6:38 pm
Copy link
Thx for the update.

I can understand, that @import rules could cause security issues, but it would be nice, if one could choose between typekit and google webfonts and possible other sites.

Also the biggest concern are the unicode entities at the moment. Gradients can be done with images, but I have no alternative to the entities…
designsimply · Member · Feb 21, 2012 at 8:11 pm
Copy link
In my tests, the entities work, they just don’t preview. Can you point me to a case where I can see unicode entities which aren’t working for you?
jantank · Member · Feb 22, 2012 at 9:24 am
Copy link
content: "BB000A0";
becomes
content: "BB000A0";

content: "B7A0B7A0";
becomes
content: "B7A0B7A0";

Both happens on save. The editor shows that stuff in the textarea. And on the site itself (not preview) I have B7A0B7A0 before my menu points, for example…
jantank · Member · Feb 22, 2012 at 10:33 am
Copy link
I really get annoyed now! Stop rewriting my CSS. And do not do it automatically. It is not working!

padding-bottom: 5px !important;
This is not the same as the automatic code rewrite to:
padding: 0 0 5px !important;

In this case it also blocks top and right padding from being overwrite-able. But I only want padding-bottom been blocked to 5px.

And the biggest concern with this is, that I can’t verify, which stuff is being removed, changed or rewritten! So I can’t tell my client, that all stuff is working and working as expected, because I do NOT know!
timethief · Member · Feb 22, 2012 at 11:07 pm
Copy link
@jantank
Where is the active link starting with http:// to the free hosted WordPress.com blog that you purchased an annually renewable custom design upgrade for please?
jantank · Member · Feb 23, 2012 at 8:32 am
Copy link
Please click on my name.
designsimply · Member · Feb 20, 2014 at 8:08 pm
Copy link
I’m so sorry I didn’t see the past replies here before! I have been reviewing past threads here and there and just spotted this one.

The problem with the unicode examples you posted before is that they are not valid unicode entities. Example:

content: "BB000A0";

Unicode entities in CSS must be formatted as a backslash and four characters that correspond with the entity code. Here is a really good example:
http://dabblet.com/gist/1576546

I really get annoyed now! Stop rewriting my CSS. And do not do it automatically. It is not working!

The WordPress.com CSS editor shouldn’t be rewriting any CSS, but you do need to make sure the syntax is correct or it might not get accepted by the editor.

I just tested the example you posted before and it didn’t get rewritten:

padding-bottom: 5px !important;

I’m not sure how you were checking it before, but note that browsers themselves will sometimes interpret CSS in quirky ways. If you were checking CSS in the browser directly, then it could have been a browser-specific adjustment that you saw. I’m not saying it’s for certain, but based on your description that would be my best guess for what was happening.

No items found.