writing-mode and text-orientation

[imran-vz]

These two properties text-orientation and writing-mode are used in conjunction to create sideways text.
I could have created add a class in the utilities layer, but I just love the VSCode intellisense.

These are some suggestions.

• text-orientation

  • .text-sideways

    text-orientation: sideways;

  • .text-upright

    text-orientation: upright;

  • .text-mixed

    text-orientation: mixed;

  • .text-sideways-right

    text-orientation: sideways-right;

  • .text-glyph

    text-orientation: use-glyph-orientation;

• writing-mode

  • .writing-vertical-lr

    writing-mode: vertical-lr;

  • .writing-vertical-rl

    writing-mode: vertical-rl;

  • .writing-horizontal-tb

    writing-mode: horizontal-tb;

[imran-vz]

This is a duplicate issue.

Just found another issue opened earlier #5237

[jbryan11]

I like the idea to add these two properties as new utilities. I had recently used these two properties and checked that there hasn't been any utilities for these in tailwindcss.

These two properties text-orientation and writing-mode are used in conjunction to create sideways text. I could have created add a class in the utilities layer, but I just love the VSCode intellisense.

These are some suggestions.

• text-orientation

  • .text-sideways

    text-orientation: sideways;

  • .text-upright

    text-orientation: upright;

  • .text-mixed

    text-orientation: mixed;

  • .text-sideways-right

    text-orientation: sideways-right;

  • .text-glyph

    text-orientation: use-glyph-orientation;

• writing-mode

  • .writing-vertical-lr

    writing-mode: vertical-lr;

  • .writing-vertical-rl

    writing-mode: vertical-rl;

  • .writing-horizontal-tb

    writing-mode: horizontal-tb;

I would like to suggest other class names for the rules @M0hammedImran suggested.
For the text-orientation rules, rather than using text-*, orientation-*(or orient-*) is preferable. Using text-* in .text-mixed class name makes it vague and confusing.
Using orientation-* prefix, it would look like this:

.orientation-sideways { text-orientation: sideways; }
.orientation-upright { text-orientation: upright; }
.orientation-mixed { text-orientation: mixed; }
.orientation-sideways-right { text-orientation: sideways-right; }
.orientation-glyph { text-orientation: use-glyph-orientation; }

On writing-mode, I would suggest a very different naming

.vertical-writing-lr { writing-mode: vertical-lr; }
.vertical-writing-rl { writing-mode: vertical-rl; }
.horizontal-writing-tb { writing-mode: horizontal-tb; }

[mrienstra]

Related discussions:
#2494
#5237 (already mentioned above by @M0hammedImran)
#9240

[mrienstra]

Using @jbryan11's proposed naming, as a plugin, javascript:

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        // https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
        ".horizontal-writing-tb": { "writing-mode": "horizontal-tb" },
        ".vertical-writing-rl": { "writing-mode": "vertical-rl" },
        ".vertical-writing-lr": { "writing-mode": "vertical-lr" },
        // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
        ".orientation-mixed": { "text-orientation": "mixed" },
        ".orientation-upright": { "text-orientation": "upright" },
        ".orientation-sideways-right": { "text-orientation": "sideways-right" },
        ".orientation-sideways": { "text-orientation": "sideways" },
        ".orientation-glyph": { "text-orientation": "use-glyph-orientation" },
      })
    }),
  ],
}

As a plugin, typescript:

import { type Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

export default {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        // https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
        ".horizontal-writing-tb": { "writing-mode": "horizontal-tb" },
        ".vertical-writing-rl": { "writing-mode": "vertical-rl" },
        ".vertical-writing-lr": { "writing-mode": "vertical-lr" },
        // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
        ".orientation-mixed": { "text-orientation": "mixed" },
        ".orientation-upright": { "text-orientation": "upright" },
        ".orientation-sideways-right": { "text-orientation": "sideways-right" },
        ".orientation-sideways": { "text-orientation": "sideways" },
        ".orientation-glyph": { "text-orientation": "use-glyph-orientation" },
      });
    }),
  ],
} satisfies Config;

Not clear when they would be useful, but technically there are more values:

writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;

text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

Edit: changed object keys from writingMode & textOrientation to "writing-mode" & "text-orientation", for consistency with corePlugins.js.