
Lesson Description
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.
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