Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Web Typography Enhancing Typography

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points
Posted by Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Is there a way to shortcut proper typography in css?

With all the "proper" characters you're supposed to use and the coding that we have to enter in order to use it, there's gotta be a better way than having to hand-code all the special characters while you are creating page content. Is there any CSS code that will automatically replace things with the correct form of characters, such as opening and closing quotation marks, ampersands, ellipses, emdash, etc.? Seems like a hassle to have to look up the code (here, I've been told: http://www.impressivewebs.com/html-entity-reference-common) every time you want to put the correct character in.

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points
Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

No problem, Shawn! Can't claim that it was my find (it was listed in the course). I'm glad I'm not the only one wondering this, though.

2 Answers

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Hmm, this seems like something that you would have to do server side, before the page is delivered to the client. PHP seems to have a function for it:

http://php.net/manual/en/function.htmlspecialchars.php

Maybe Haml has a solution as well. http://haml.info/about.html

Alternatively, you could use Javascript:

http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

you can add some things to your markup through css files with pseudo-selectors.

example::after { content: "&,@,?,etc..."; }

Robert Manolis
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Not sure if that's any easier though. :)