SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari messes up unicode from CSS content

    Straight to the point. This is my CSS:
    Code:
    .external:after {
    	content:' ';
    	}
    Here is the obvious html:
    HTML Code:
    <a class="external" href="http://example.com/">Link</a>
    This is the output in Firefox and Opera:
    Code:
    Link 
    Safari displays this:
    Code:
    Link »
    Note that all files are saved as UTF-8. Safari doesn't have any problem displaying unicode strings from the html. Also note that this problem only occurs in Safari when the CSS is loaded from an external file.

    I've set up a test page. Have a look. Thanks.

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Calarasi, Romania
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know what the problem is since i cannot test under Safari, but you may also want to know that :before and :after are not supported by IE at all.
    v-wdd.net/blog/

  3. #3
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vic.stanciu
    I don't know what the problem is since i cannot test under Safari, but you may also want to know that :before and :after are not supported by IE at all.
    I know, but in this case I don't care about IE. I'm designing the admin interface for a site and only people who know that IE is bad will work with the admin. Feels very good, by the way, to not have to care about that browser for once.

    However, I'd like the design to work fine in Safari...

  4. #4
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use an entity in replace of your character:

    &raquo;

    or

    an ampersand, then pound sign, the number 187 and then a semi-colon and Safari should play nice.

    I would type it but the browser renders the entity so I tried to spell it out for you.

    Here is a page with both of them rendering the same in Safari:
    http://johnwozniak.com/code-lab/entity-test.html

  5. #5
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, putting the html entitity in the CSS doesn't seem to help.

    Code:
    .external:after {
    	content:' &raquo;';
    	}

  6. #6
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GeertDD
    Hmm, putting the html entitity in the CSS doesn't seem to help.

    Code:
    .external:after {
    	content:' &raquo;';
    	}
    A little fiddling did the trick - be sure you are using utf-8:
    http://johnwozniak.com/code-lab/entity-test.html

    You could use "Test 3" or "Test 4" and it will look the same in Safari or Firefox. As you can see neither Safari nor Firefox likes the entities when used as generated content so that is something to be aware of - the character should be a part of the encoding being used on the page.

  7. #7
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your test page works in Safari because you're declaring the CSS in the html <head>. However, try to put the CSS into an external css file (via a <link> in the <head>). That is where it goes wrong in Safari.

    By the way, thanks for taking the time to research this stuff.

  8. #8
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GeertDD
    Your test page works in Safari because you're declaring the CSS in the html <head>. However, try to put the CSS into an external css file (via a <link> in the <head>). That is where it goes wrong in Safari.

    By the way, thanks for taking the time to research this stuff.
    Gotcha...

    What is the app you are using to create the external CSS file and can you specify an encoding in the preferences of the text editor? It may not be encoded as you wish.

    For text editing on my Mac in UTF-8, I use Smultron:
    http://smultron.sourceforge.net/

    You can set the encoding to UTF-8 for files by going to Preferences>Open & Save>Encodings.

    I am guessing that your file is being saved as ISO-8859-1 or something other than UTF-8.

    Hopefully this will solve it.

  9. #9
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said earlier, all files are saved as Unicode (UTF-8, no BOM). So that isn't causing the problem. The weird thing is that it is only Safari that gets it wrong. No problems in Firefox or Opera.

    Currently TextWrangler is my editor. I'll have a look at Smultron too though, thanks for the tip.

  10. #10
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GeertDD
    As I said earlier, all files are saved as Unicode (UTF-8, no BOM). So that isn't causing the problem. The weird thing is that it is only Safari that gets it wrong. No problems in Firefox or Opera.

    Currently TextWrangler is my editor. I'll have a look at Smultron too though, thanks for the tip.
    I didn't mean to suggest you weren't saving them as UTF-8 - I was hoping you weren't (accidentally) and that by doing so we would have this working .

    Use an image and use a method that works for IE too - it won't kill you !

    I put this together for another poster awhile back in case you need any ideas:
    http://johnwozniak.com/code-lab/list...ist-items.html

    Sometimes the best choice in technique is the pragmatic one (in this case - the one that works).

    As far as editors TextWrangler is a very good choice and as good as any - I am personally partial to Smultron but they both are much better than average at most tasks.

  11. #11
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John Wozniak
    Use an image and use a method that works for IE too - it won't kill you !
    Sure about that!?

    Anyway, I know I could use an image. It would result in another 'effect' though. The underline of the link won't underline the image. Also the image won't scale when resizing text. Well, actually it all doesn't really matter. Sometimes I'm just to stubborn to take the easy road.

    Can we conclude that this actually a little bug in Safari?

  12. #12
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by GeertDD
    Sure about that!?

    Anyway, I know I could use an image. It would result in another 'effect' though. The underline of the link won't underline the image. Also the image won't scale when resizing text. Well, actually it all doesn't really matter. Sometimes I'm just to stubborn to take the easy road.

    Can we conclude that this actually a little bug in Safari?
    I believe it is - we tested it with a really simple test case - I see lots of sites that have the same problem in Safari. I do want to test it with 8859-1 if I get a chance and kick this around for a bit. I gotta get out of the house for a bit but will take a look later.

    I love Safari - but complex software has bugs .

  13. #13
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bug in WebKit. External stylesheets are always parsed as iso-8859-1 (or perhaps windows-1252?) even though utf-8 has been specified. I've seen this bug before but I havn't got around to report it yet (until now). See spec, test case, result and bug report.
    Simon Pieters

  14. #14
    SitePoint Addict GeertDD's Avatar
    Join Date
    Feb 2005
    Location
    Belgium
    Posts
    334
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for submitting the bug, Simon.

    One question regarding the CSS from your test page. You're writing #test::before {}. I guess the double colon is a typo?

  15. #15
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, pseudo-elements have two colons according to Selectors.
    Simon Pieters

  16. #16
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Appearently charset from Content-Type (and @charset) has already been fixed. However, if the style sheet doesn't declare any encoding then the encoding of the referring style sheet or document should be used, which WebKit doesn't.
    Simon Pieters

  17. #17
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought that declaring the encoding some alternative way might work - good to know it should.

    I wonder what would happen if you use @charset and declare an encoding that is not what the document really is...

    If I get a chance I will take a further look.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •