Unicode Private Use Area (PUA) characters and HAML

[Chris Maxwell]

High Folks,

Hope everyone had a great Christmas!

Does anyone know why Unicode PUA characters (the "" below) do
not work in something like this:

%nav{:role => "navigation"}
%ul#nav
%li
%a{:href => "/", :title => 'Home'}
%span{"aria-hidden" => "true", "data-icon" => ""}
%span.ir Home

I haven't been able to figure out why, or find similar issues
encountered by others when using them with HAML. It's not a
dealbreaker, this works in ERB:

<nav role="navigation">
<ul id="nav">
<li>
<a title="Home" href="/">
<span data-icon="&#xe00c;" aria-hidden="true"></span>
<span class="ir">Home</span>
</a>
</li>
</ul>
</nav>

The reason why I am mapping icons to Unicode PUA characters rather than
regular letters is that screen readers will read the letter and not a
PUA character. In case you're interested, the corresponding CSS looks
like this:

@font-face
font-family: 'icon-fonts'
font-weight: normal
font-style: normal
src: font-url('icon-fonts.eot')
src: font-url('icon-fonts.eot?#iefix') format("embedded-opentype"),
font-url('icon-fonts.svg#icon-fonts') format("svg"),
font-url('icon-fonts.woff') format("woff"), font-url('icon-fonts.ttf')
format("truetype")

[data-icon]:before
font-family: 'icon-fonts'
content: attr(data-icon)
speak: none
font-weight: normal
line-height: 1
-webkit-font-smoothing: antialiased

The fonts were grabbed from here:

http://icomoon.io

Thanks!

Chris

[Jeremy Weiskotten]

Hey Chris,

What markup is rendered by the Haml example?

> --
>
>

[Brian Cardarella]

Chris,

Have you seen: http://haml.info/docs/yardoc/file.REFERENCE.html#encodings

- Brian

[Chris Maxwell]

Thanks Brian,

I finally figured it out:

%span{"aria-hidden" => "true", "data-icon" => "&#xe006;".html_safe}

.html_safe does the trick!

Chris

--
 
 

[Brice Stacey]

Check out Font Awesome's CSS. Try to encode the content directly in the CSS, try different ways to escape the Unicode, eg try how FA does it. And you should probably test with a common letter to be sure your CSS is correct for even rendering anything. 

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

--

[Chris Maxwell]

Thanks Brice,

I ended up solving it with:

"&#xe00c;".html_safe

 Chris

--
 
 

[Peter Jaros]

I'm glad to hear that works, but I would suggest using Font Awesome's
method anyhow. When I look at "&#xe00c;", I have no idea what it
means. A class of .icon-home (for instance) is much more
self-explanatory and semantic. Even more semantic would be to use a
class to describe what the element means on the page, and let the CSS
dictate that it should be displayed as an icon, a step beyond the Font
Awesome approach. The Unicode code point—and even, I think, that it
should show up as an icon—is better considered presentation, and not
content.

Peter

> --
>
>



--
Sounds: http://www.welikethisnow.com/
Words: http://blog.peeja.com/
Conversation: (603) 548-1203

[Chris Maxwell]

Hi Peter,

I do like their approach, and have thought about using it, but I
personally try to stay away from too much class bloat in my markup -
that's just my way. I may not understand what the Unicode character
means, but in my thinking the anchor title and the second span are
clear enough I hope! "home". I can see what the font is when I render it.

You may also be wondering why I use two spans, or any for that matter?
... the reason is I am addressing users who might be visually impaired.
The first span contains the character, which I don't want a screen
reader to read so I use ARIA's:

"aria-hidden" => "true"

..backed up by the CSS "speak: none" which unfortunately does not work
everywhere.

I do want the screen reader to read with the font is though, so I add
the second span and remove it through an image replacement helper (.ir).

I could have added the first span stuff to the anchor, but I do want
that read by the screen reader, so I use the span instead.

I'm probably not explaining myself well; if you're interested here are
some great resources (in publication order):

http://24ways.org/2011/displaying-icons-with-fonts-and-data-attributes/
http://yatil.net/a-better-way-to-use-icon-fonts
http://pictos.cc/articles/using-icon-fonts/
http://css-tricks.com/html-for-icon-font-usage/

Thanks for your feedback! I really appreciate it.

Chris

On 12/28/2012 6:00 PM, Peter Jaros wrote:
> I'm glad to hear that works, but I would suggest using Font Awesome's
> method anyhow. When I look at "&#xe00c;", I have no idea what it
> means. A class of .icon-home (for instance) is much more
> self-explanatory and semantic. Even more semantic would be to use a
> class to describe what the element means on the page, and let the CSS
> dictate that it should be displayed as an icon, a step beyond the Font

> Awesome approach. The Unicode code point�and even, I think, that it
> should show up as an icon�is better considered presentation, and not

[Chris Maxwell]

Hey Jeremy!

ERB:

<a href="/" title="Home">
<span aria-hidden="true" data-icon=""></span>

<span class="ir">Home</span>
</a>

HAML:

<a title="Home" href="/">

<span data-icon="&amp;#xe00c;" aria-hidden="true"></span>

<span class="ir">Home</span>
</a>

[Jeremy Weiskotten]

That's what I thought, and was going to recommend .html_safe, which you seem to have figured out already. :)

> --
>
>

[Patrick Robertson]

There was a message in the moderation queue for quite some time it seems.  Sorry for screwing up the conversation!

- Patrick

--