Get the writing mode of text

Get the writing direction. Some languages the text is from left to right and others from right to left. Some have top to bottom and bottom to top.

Depending on what the writing direction determines if a block of text is from left to right or right to left and that determines some properties to set when exporting to other formats or for displaying help inline in a plugin dialog.

Use Case
Janet is a developer writing a plugin for her language class. They are translating between English and Japanese. She wants to provide instructions for both users of her plugin. If she is able to determine the horizontal and vertical direction she can display the text direction correctly for help documentation and exporting documents.

How do you detect this on a browser? getComputedStyle?

Yes that’s the way to detect it on the browser. There’s a few properties I can get to do this:

var direction = getComputedStyle(document.body).direction;
var writingMode = getComputedStyle(document.body)[“writing-mode”];
var lang = navigator.language;

When I call getComputedStyle in UXP it appears code execution stops:

console.log("Hello"); // written to the console
console.log("Is this line reached?"); // not written

I think what I’m looking for might be solved by the lang pseudo element.

yeah getComputedStyle is not supported yet. Kerri can provide a timeline on this once she comes back.

1 Like

I also desperately need window.getComputedStyle()…

1 Like

@kerrishotts any updates on this? Currently I need to get the height of a div. Any alternatives are welcome.

It appears element.clientHeight and element.clientWidth works.

You can use client% or GetBoundingClientRect, but remember that layout happens asynchronously, and so the initial values may not be what you expect (likely 0). Wait for a tick or a resize event before querying these values.

1 Like

just realised that getComputedStyle is still not being supported. are there any plans to support it or is it off the table by now?