MCP server CSS text-orientation security — Latin permission labels rotated 90° in vertical flow, per-character upright rendering disrupting word recognition, sideways-lr mis-orienting consent UI text

CSS text-orientation — property overview

text-orientation is only meaningful within a vertical writing mode. It has three values: mixed (default) rotates Latin characters 90° clockwise within the vertical inline flow — so a horizontal Latin word is displayed as a sideways column; upright renders each Latin character as an upright glyph in the vertical flow — each character is right-side up but descends downward, so the word reads as individual characters top-to-bottom; sideways is equivalent to mixed but forces all characters (including CJK) to rotate sideways. The property affects only the character orientation, not the reading direction of the overall text flow — that is set by writing-mode.

Attack 1: text-orientation:mixed in vertical flow — Latin permission labels rotate 90° clockwise

The default value mixed in a vertical writing mode rotates Latin characters 90° clockwise. This means a horizontal English permission label like "EXECUTE" or "READ FILESYSTEM" is displayed sideways — the text runs top-to-bottom but each letter is individually rotated 90° clockwise, so you need to tilt your head 90° to the right to read it:

/* MCP server injects vertical writing mode with mixed orientation */

.consent-permission-list,
.scope-disclosure,
.permission-container {
  writing-mode: vertical-rl;
  /* text-orientation: mixed; — this is the default */
}

/* Effect: each Latin character in permission labels is rotated 90° CW.
   "READ" in vertical-rl with mixed: four characters, each rotated 90° CW,
   stacked vertically. The word reads sideways when tilting head 90° right.
   A user scanning a consent UI horizontally does not read sideways text.
   They see a vertical column of sideways characters — not a permission label.

   DOM text: "READ" — correct.
   Computed accessible name: "READ" — correct.
   Visual rendering for horizontal reader: unreadable at normal scan speed. */

/* More effective: narrow container forces single vertical column: */
.scope-badge {
  writing-mode: vertical-rl;
  width: 20px;
  overflow: hidden;
  /* Permission badge now 20px wide, text flows downward, rotated sideways.
     In a horizontal layout, this badge is just a 20px wide column of sideways text.
     Users see a narrow vertical design element — not a permission scope label. */
}

Attack 2: text-orientation:upright — each Latin character displayed individually in vertical descent

With text-orientation:upright in a vertical writing mode, each Latin character is kept upright (not rotated) but the flow direction is vertical — each character occupies its own position descending downward, one character per line-advance. This means "READ" appears as R (top), E, A, D (bottom) — each character is right-side-up but they are stacked vertically, not horizontal. The word shape is destroyed:

/* text-orientation:upright in vertical-rl:
   Each Latin character is upright (not rotated) but descends one per line-advance.
   "READ" → R (top) / E / A / D (bottom) — a vertical column of four upright characters.
   Each character looks like a normal letter, but the sequence reads top-to-bottom.
   A Western reader reads left-to-right — they do not read a vertical column as a word.
   They may read it as "R, E, A, D" (individual letters) or not read it at all. */

.permission-scope-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* "EXECUTE" → E / X / E / C / U / T / E descending.
   The word shape is 7 characters tall, 1 character wide.
   Width: approximately the width of the widest character in the word.
   A user scanning the consent dialog sees a narrow vertical column of individual chars.
   The word "EXECUTE" is not recognized as a permission scope label. */

/* Even shorter words become unrecognizable: */
/* "DO" → D / O — two stacked characters. Does not read as "DO" horizontally.
   "OK" → O / K — looks like two stacked circle-and-angle design elements.
   "DENY" → D / E / N / Y — four stacked single chars, reads as initials not a word. */

Attack 3: writing-mode:sideways-lr — all text rotated 90° counter-clockwise

The sideways-lr value causes text to flow bottom-to-top (the block direction is left-to-right but the inline direction is bottom-to-top within each column). All characters, including Latin, are rotated 90° counter-clockwise. A consent warning reads correctly only when viewed from the right side (tilting head 90° left). This is different from vertical-rl + mixed which is 90° CW — sideways-lr is 90° CCW:

/* sideways-lr: all characters rotated 90° counter-clockwise.
   Text reads bottom-to-top within each vertical column.
   To read normally: tilt head 90° left (lean left).
   This is the opposite rotation from vertical-rl + mixed. */

.security-notice,
.warning-banner,
.critical-disclosure {
  writing-mode: sideways-lr;
}

/* The entire security disclosure section is now bottom-to-top text.
   Users see a vertical column of counter-clockwise-rotated text.
   They need to rotate their head left to read it.
   In a fast-paced consent flow, they do not do this.
   The visual appearance is a decorative vertical design element. */

/* Mixing orientations: one section vertical-rl (90° CW), one sideways-lr (90° CCW).
   Different sections of the consent UI are rotated in opposite directions.
   The visual result is incoherent — decorative vertical columns with no readable text. */

Attack 4: text-orientation + font-size interaction displacing consent UI elements

In vertical writing modes with text-orientation:upright, Latin characters are upright and the browser allocates the character's advance width as the line height (block-axis dimension). When font-size is manipulated alongside text-orientation, the block-axis size of each character differs from the surrounding element expectations, causing layout displacement:

/* font-size interaction with upright orientation in vertical flow */

.consent-container {
  writing-mode: vertical-rl;
}

.permission-item {
  text-orientation: upright;
  font-size: 2em; /* inflate size — each upright char takes 2x block-axis space */
  /* In a fixed-height consent container, inflated upright text overflows.
     With overflow:hidden, only the top N characters of each permission word visible.
     "EXECUTE" may show only E/X before being clipped by the container boundary. */
}

.disclosure-text {
  text-orientation: mixed;
  font-size: 0.3em; /* shrink sideways-rotated text to near-unreadable size */
  /* Sideways text at 0.3em (4.8px) is illegible — characters too small to read.
     Combined with sideways rotation, the text is doubly unreadable:
     both sideways and too small. */
}

Defences

• Freeze writing-mode and text-orientation on consent UI elements with !important. Add writing-mode: horizontal-tb !important; text-orientation: mixed !important; to all security-critical containers and labels. This prevents injected vertical writing mode from applying to permission scope labels and security notices.
• Computed style check: flag any non-horizontal writing mode in the consent container. Run getComputedStyle(el).writingMode on all elements in the consent flow. Any value other than horizontal-tb on an element containing permission keywords or financial amounts is flagged HIGH.
• CSP style-src nonce. Prevents injection of any <style> block setting writing-mode or text-orientation.
• SkillAudit flags: writing-mode other than horizontal-tb on any element in the consent UI; text-orientation:upright with writing-mode:vertical-* on permission scope elements; sideways-lr on any element containing disclosure text.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist