CSS writing-mode Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic page styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 24px;
  background: #f7f7fb;
  color: #111;
}

.wrapper h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.box {
  background: white;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 12px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.box .label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 12px;
  color: #555;
}

.box p {
  margin: 0;
  line-height: 1.4;
}

/* writing-mode examples */
.horizontal {
  writing-mode: horizontal-tb; /* default left-to-right, lines flow top-to-bottom */
}

.vertical-rl {
  writing-mode: vertical-rl; /* lines flow top-to-bottom, columns right-to-left */
  text-orientation: mixed; /* preserve upright Latin letters when possible */
}

/* Improve appearance for vertical blocks */
.vertical-rl p {
  white-space: normal;
  max-width: 12ch;
}
</style></head><body><div class="wrapper">
  <h1>CSS writing-mode demo</h1>
  <div class="grid">
    <section class="box horizontal">
      <div class="label">horizontal-tb</div>
      <p>Example text  -  The quick brown fox jumps over the lazy dog.</p>
    </section>

    <section class="box vertical-rl">
      <div class="label">vertical-rl</div>
      <p>Example text  -  The quick brown fox jumps over the lazy dog.</p>
    </section>
  </div>
</div></body></html>