Skip to main content
CSS is fun and cool and I like it.
Article

Considerations When Choosing Fonts for a Multilingual Website

As a front-end developer working for clients all over the world, I’ve always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the way and am going to share a few tips in this post.

Let’s work in Arabic and English, not just because Arabic is my native language, but because it’s a classic example of RTL in use.

Adding RTL support to a site

Before this though, we’ll want to add support for an RTL language on our site. There … Read article “Considerations When Choosing Fonts for a Multilingual Website”

Article

The Trick to Animating the Dot on the Letter “i”

Here’s the trick: by combining the Turkish letter “ı” and the period “.” we can create something that looks like the letter “i,” but is made from two separate elements. This opens us up to some fun options to style or animate the dot of the letter independently from the stalk. Worried about accessibility? Don’t worry, we’ll cover that the best way we know how.

Let’s look at how to create and style these separate “letters,” and find out when … Read article “The Trick to Animating the Dot on the Letter “i””

Link

CSS Triangles, Multiple Ways

Snippet

Glyphs

Special Characters
" " quotation mark u+0022 ISOnum p:before { content:”\0022″; } alert(“\42”)
& & & ampersand u+0026 ISOnum p:before { content:”\0026″; } alert(“\46”)
&lt; &#60; < less-than sign u+003C ISOnum p:before { content:”\003c”; } alert(“\74”);
&gt; &#62; > greater-than sign u+003E ISOnum p:before { content:”\003e”; } alert(“\76”);
Latin-1 entity set for HTML
&nbsp;   &#160; no-break space %A0 p:before { content:”\00a0″; } alert(“\240”);
&iexcl; ¡ &#161; inverted exclamation mark %A1 p:before { content:”\00a1″; } alert(“\241”);
&cent; ¢ &#162;
Read article “Glyphs”