Autoprefixer: `-ms-writing-mode` does not take `direction` property into account

[Dan503]

In this code pen, I have both writing-mode: vertical-rl; and direction: rtl; in the same rule CSS rule.

https://codepen.io/daniel-tonon/pen/rqPbmZ

In modern browsers it looks like this:

However in IE it appears like this:

Usually IE does support direction when it is used on it's own however when it is combined with writing mode, writing-mode takes priority, even if direction was used after writing-mode in the CSS order.

Input CSS

.element {
  writing-mode: vertical-rl;
  direction: rtl;
}

Current output CSS

.element {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  direction: rtl;
}

Expected output CSS

.element {
  -ms-writing-mode: bt-rl;
  writing-mode: vertical-rl;
  direction: rtl;
}

---

Examples of every combination

For the sake of completeness here are a bunch of screenshots and code snippets showing all the different possible configurations you can have:

---

direction: ltr; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;

---

direction: rtl; -ms-writing-mode: rl-tb; writing-mode: horizontal-tb;

---

direction: ltr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr;

---

direction: rtl; -ms-writing-mode: bt-lr; writing-mode: vertical-lr;

---

direction: ltr; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;

---

direction: rtl; -ms-writing-mode: bt-rl; writing-mode: vertical-rl;

[ai]

Is Can I Use data wrong? https://caniuse.com/#search=writing-mode

[Dan503]

No, caniuse isn't wrong, it's just that IE uses a different syntax. The IE syntax is entirely self reliant but the modern syntax is reliant on both writing-mode and direction for it to get the same effect.

So in order to translate IE correctly, you have to take the direction property into account.

[ai]

@Dan503 Autoprefixer is not for polyfills

[Dan503]

It's not a polyfill.

A polyfill would be this:

input

-ms-writing-mode: bt-rl;

output

direction: rtl;
writing-mode: vertical-rl;
-ms-writing-mode: bt-rl;

What I'm saying is

input

direction: rtl;
writing-mode: vertical-rl;

output

direction: rtl;
-ms-writing-mode: bt-rl;
writing-mode: vertical-rl;

In order for autoprefixer to produce the correct IE prefix values, it needs to have access to _both_ input property values.

[ai]

So, why do we need -ms-writing-mode: bt-rl;? It is only for IE Mobile (according Can I Use). Or IE will not understand direction: rtl without -ms-writing-mode: bt-rl;?

[Dan503]

No it's not, IE11 uses it as well.

[Dan503]

Look through all the examples I gave in the issue.

You will notice that the IE prefix changes based on both the value of direction and the values of writing-mode.

[ai]

No it's not, IE11 uses it as well.

There is no -ms- badge in IE section of Can I Use, so Can I Use tells that IE don’t need -ms-writing-mode.

Can you tell more details? What property will work in IE? What browsers will use writing-mode: vertical-rl;? What browsers will use direction: rtl;. What is a spec version.

[ai]

You will notice that the IE prefix changes based on both the value of direction and the values of writing-mode.

So IE requires 2 properties? Will -ms-writing-mode not work without direction?

[Dan503]

There is no -ms- badge in IE section of Can I Use, so Can I Use tells that IE don’t need -ms-writing-mode.

Ok so caniuse isn't wrong. IE recognizes writing-mode as a real property but like it says on on caniuse, IE doesn't understand modern syntax.

Internet Explorer supports different values from an earlier version of the spec, which originated from SVG.

So IE understands syntax that looks like this:

writing-mode: bt-rl;

But it still also understands the prefixed syntax:

-ms-writing-mode: bt-rl;

IE _does not_ understand this: (every other browser in the world _does_ understand this syntax though):

direction: rtl;
writing-mode: vertical-rl;

IE does understand direction if it is used on it's own but writing-mode overrides it if it is used in the same rule.

Autoprefixer is _already_ prefixing writing-mode so I don't think that it is fair to say that Autoprefixer isn't going to support this. This is a bug in Autoprefixer implementation of the -ms-writing-mode prefix.

What is the spec version?

In all of the examples I gave, the unprefixed values were the modern day spec version that is supported in the vast majority of browsers today.

direction: rtl;
writing-mode: vertical-rl;

In all the examples I gave, the -ms-writing-mode bits were the old IE specific syntax that only IE understands.

-ms-writing-mode: bt-rl;

So IE requires 2 properties? Will -ms-writing-mode not work without direction?

Basically yeah, you can assume defaults if the user doesn't provide the second value, but if they do provide both values then both values need to be taken into consideration when calculating the value of -ms-writing-mode.

The default values are:

direction: ltr;
writing-mode: horizontal-tb;

I'm not sure if a warning should be declared if one of the properties is missing. On the one hand, it would help users debug IE. On the other hand, we can assume default values and not annoy users with extra warnings.

[ai]

So, we need to fix -ms-writing-mode: tb-rl; to -ms-writing-mode: bt-rl;?

Do you have table of all possible standard values and IE values?

[Dan503]

So, we need to fix -ms-writing-mode: tb-rl; to -ms-writing-mode: bt-rl;?

No, it's not that simple.

{ -ms-writing-mode: tb-rl; } = { direction: ltr; writing-mode: vertical-rl; }

{ -ms-writing-mode: bt-rl; } = { direction: rtl; writing-mode: vertical-rl; }

Do you see the difference? This _specific_ example differs based on the value of direction.

Do you have table of all possible standard values and IE values?

Yes, I posted it already in the original issue. I've added a heading to make it easier to find.

Look through every example I posted under the heading "Examples of every combination". Look carefully, you will see that every -ms-writing-mode value is slightly different depending on both the direction and writing-mode values.

[Dan503]

Is it possible to ensure that the IE prefix is produced in IE11 even though caniuse says that the prefix is not needed?

IE11 doesn't understand the modern syntax so it should still get the prefixed version.

[ai]

So value for -ms-writing-mode depends not only for writing-mode value but also for direction value?

[Dan503]

So value for -ms-writing-mode depends not only for writing-mode value but also for direction value?

Yes, that's what I have been trying to say this whole time.

[ai]

Do you want to send PR?

I am going to the conference and afraid that I will not be able to fix it in the next few days.

[Dan503]

(I'm hoping that Bogdan will pick this up)

[bogdan0083]

I might take a look at this issue it a week or two 👍

[webschik]

Fixed in #1175

[ai]

Released in 9.4.4