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

Articles Tagged writing-mode

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
4 Articles
{
,

}
Article

Building Multi-Directional Layouts

Avatar of Ahmad El-Alfy
Author
Ahmad El-Alfy
5 Comments
Join Conversation

There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start).  These are a W3C working draft that still going under heavy editing, but have shipped in many browsers. I want to talk about this because I’ve been using these properties for a little while and have seen a significant boost to my workflow after switching to them.… Read article

Link

CSS Writing Modes

Avatar of Chris Coyier
Shared by
Chris Coyier

We shared a little trick not long ago about using the writing-mode property to set a title vertically. While a useful trick, it's the tip of the iceberg on this property. Jen Simmons digs in and explains what's really going on.

There is a certain way elements flow on websites. Without doing anything special, block elements push downward from top to bottom. Inline elements go from left to right. In writing-mode, that would be expressed by (the default) horizontal-tb (horizontal … Read article

Our Notes   /   Read at 24ways.org
Snippet

Text Rotation

Avatar of Chris Coyier
Author
Chris Coyier
63 Comments
Join Conversation

If what you are looking for is a way to set type vertically, you're best bet is probably CSS writing-mode.

If you're just trying to turn some text, you can rotate entire elements like this, which rotates it 90 degrees counterclockwise:

.rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don't need... */

  /* Safari */
  -webkit-transform: rotate(-90deg);

  /* Firefox */
  -moz-transform: rotate(-90deg);

  /* IE */
  -ms-transform: rotate(-90deg);

  /* Opera */
  -o-transform: rotate(-90deg);

  /* Internet Explorer */
… Read article