Check out a free preview of the full Design for Developers course

The "CSS Writing Mode" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Exploring the use of CSS writing-mode vs transform, Sarah walks through some examples of playing with text layout and orientation.

Preview
Close

Transcript from the "CSS Writing Mode" Lesson

[00:00:00]
>> Sarah Drasner: CSS writing-mode. Remember, when I put that block of text that was transformed, it's turned on its side? So one way to do this is CSS writing-mode. It's also a really good thing to know about if you're doing internationalization for your site. So if you need to support Hebrew, or if you needed to support Chinese or Japanese, it's a really good thing to know about.

[00:00:20]
But you can also use it for regular text. There's a bunch of different resources that you can check off of that. Jen Simmons actually wrote an article for 24 ways last year, and it was really excellent. So that's a really good breakdown. It isn't as well supported as just transforming.

[00:00:39]
Just transforming is supported everywhere, writing-mode is not necessarily. So sometimes, I'll just use a transform instead of using the writing-mode if it's just for making it look cool. Because I know that it will go the same way across all browsers. Css writing-mode, if you're actually using another language through, CSS writing-mode is a must.

[00:01:03]
It's not just for cute displays and stuff, or breaking the grid or whatever.
>> Sarah Drasner: So you can use CSS writing-mode for these kind of, you see that little thing on the side there? That's kinda nice, or you can use a transform like we saw Jen Simmons do with that whole, that whole layout that she used.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now