Component

ReadingAxis

Choose the ordinary line, a vertical column or a sideways vertical axis. The same child is rendered with an actual CSS writing mode and text orientation, so the reading geometry changes rather than only its label.

Possible use

It could let a reviewer decide whether a handoff note deserves a line, a column or a sideways filing direction, or let a presenter rotate an agenda caption to match an imaginary wall. Both uses spend typography on a spatial decision that normal flow already solves.

Reasonable alternative

A reasonable local alternative is choosing the writing mode in the surrounding layout or keeping the text horizontal. An axis ballot should not be responsible for a readable sentence's orientation.

01 / Preview

Try it yourself.

Current direction

Read this ordinary notice

Mechanism

1: Begin with the notice in the ordinary horizontal line.
2: Choose Line, Column or Sideways.
3: The actual writing mode changes the direction of the rendered content.
4: Restore line when the notice has finished facing the wrong way.

02 / Usage

Put it somewhere.

example.tsxTSX

import { ReadingAxis } from "gra-ui";
import "gra-ui/styles.css";

export function RotatedNotice() {
  return <ReadingAxis><span>Read this ordinary notice</span></ReadingAxis>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content forced to negotiate one of three actual reading axes.