CSSJanus Live demos Convert CSS stylesheets between left-to-right and right-to-left.

Content direction

Inline direction
Block
direction

Floated content

Point to the end
Floatation

Cupcake ipsum dolor sit. Amet I love croissant chocolate chocolate cake gummi bears chocolate. Chocolate jelly beans I love jelly. Sweet roll pastry sweet. Tart lemon drops pie. Jelly candy canes brownie pie macaroon pudding pie.

Sides

Flotation

A floating box at the far end of the box has borders on two sides (using border-color with four values), and border-radius on the one visible corner. It also has a margin on two sides, with different units.

Vertical

This paragraph is in a container that has padding on each side, using the two-value ("padding: 0 20%;") syntax. When rotated (top to bottom), the values should be flipped, so that the padding is on the top and bottom.

Text

This paragraph is has a text-indent. Sed efficitur vulputate arcu a facilisis. Sed et libero volutpat, facilisis ex vel, dapibus nisi. Maecenas bibendum, est non consequat consectetur, tellus erat elementum tortor, ut aliquet tellus enim sed ligula. Sed luctus congue purus sit amet condimentum. Suspendisse est ligula, accumsan laoreet porta vel, rutrum finibus dui.

Spacing

padding and margin styles. Padding.

This span has both padding and margin after the text, using margin-[direction]/padding-[direction] properties. When flipping from ltr to rtl, padding-right becomes padding-left. For tb-lr, it becomes padding-bottom.

Lorem ipsum. This span has both padding and margin before the text, using the four-value syntax. (E.g. padding: 0 0 0 1em; )

Lorem ipsum. This span has both padding and margin on both sides of the text, using the three-value syntax. When rotated, this gets converted to four-value syntax.

Borders

A border and border radius.

This span has a red border after the text, with rounded corners.

This span has a thicker border closer to the preceding line, a thinner border to the inline-start direction, and repeating text at the border closer to the following line.

Shadows

Using box-shadow, text-shadow, including inset positioning and overlapping shadows.

This text has a red shadow before the text slightly closer to the previous line, and a blue shadow after the text and slightly closer to the following line.

This box has an inset shadow, visible before the text.

This box has a light orange shadow at the start and above the text. And a red shadow at the end and below the text.

Transform

transform: translate( 25%, 50% );

Original
Transformed
(25% towards end of line, 50% toward end of page)

Position

position: relative;

  • Moved toward the following line.
  • Moved toward the previous line.
  • Moved forward in the direction of the text.
  • Moved backward in the direction of the text.

Cursors

Cursor is shown when hovering over the text.

  • The cursor points in the text direction.
  • The cursor points against the text direction.
  • The cursor is perpendicular to the text direction.
  • The cursor points to the diagonal between the block direction and inline direction.
  • diagonal cursor
  • row cursor
  • column cursor

Background image

Background-images, including URL flips, and positioning.

  • Outer
  • This element has a background arrow pointing toward the text, positioned at the text beginning.
  • This element has repeated background arrows on a line after the the text's block, pointing toward the inline direction.