CSS Writing Modes not working

[brenofabio]

Hello!

Thanks for the great work in this amazing library.
I've been having problems while trying to render a page with the "writing-mode" CSS property.
The "transform: rotate()" works fine, but there are some differences between them, and sometimes it may not be an option.

writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
*writing-mode: tb-lr;

JS Fiddle
http://jsfiddle.net/brenofabio/su9k6p6z/3/

More about CSS Writing Modes:
https://24ways.org/2016/css-writing-modes/
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://drafts.csswg.org/css-writing-modes/

[niklasvh]

Updated jsfiddle for 1.0.0: http://jsfiddle.net/tw9a2d1g/

[Prabhat2404]

Hi @niklasvh,

writing-mode still not working as you can see in Fiddle

[bierx]

Hi @niklasvh, any idea about this?

[chocolatkey]

For CJK content (Japanese in my case), vertical-rl is often used. Unfortunately, this renders like in the screenshots above. It would be nice if this were supported

[chocolatkey]

I was trying out a JSFiddle that used an old version (0.4.1) of the library, and vertical-rl actually looked pretty good besides the spacing/rotation of punctuation in the content.

Left is original, right is screenshot:
New version of lib (https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js):

Old version of lib (https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js):

[GurvirSingh]

any updates for this?

[s11rikuya]

When using it in Japanese, I solved it using
and flex.

[yanghoxom]

hope someone can handle it

@s11rikuya Can you give more detail?

[marvin-wtt]

Did anyone find a solution?

[pgn127]

Did anyone find a solution?

switched to dom to image library lol

[pablochi90]

CSS` to the cell, and put a inside the cell with this CSS

.cellStyle{
/* writing-mode: vertical-rl;
transform: rotate(180deg); */
white-space: normal;
vertical-align: bottom;
}
.spanStyle{
transform-origin: left;
transform: translate(50%, 50%) rotate(-90deg);
display: block;
}

example:

<td class='cellStyle'>
      <span class='spanStyle'>
            Hello world
      </span>
</td>

enjoy..!

[jrichardsz]

Any update?

[marvin-wtt]

switched to dom to image too

[xulihang]

Turned to html to image in the end.