Special Character/Entity Escapes

  • Author
  • #827289

    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!


    I tested saving the following example in my Appearance → Custom Design → CSS page and it saved, using single backslashes, without any trouble:

    blockquote:before {
    blockquote:after {

    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?


    Sure! It’s not the saving that’s an issue, but the rendering.

    When I try this:

    div.main > p > a.src:after {

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



    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!


    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.



    I also have this problem. Plz get it fixed soon! thx



    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);



    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.


    @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!



    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…


    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?



    content: "\BB000A0";
    content: "BB000A0";

    content: "\B7\A0\B7\A0";
    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…



    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!



    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?



    Please click on my name.


    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:

    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.

The topic ‘Special Character/Entity Escapes’ is closed to new replies.