Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Writing Modes not working #1258

Open
brenofabio opened this issue Nov 2, 2017 · 14 comments
Open

CSS Writing Modes not working #1258

brenofabio opened this issue Nov 2, 2017 · 14 comments
Labels

Comments

@brenofabio
Copy link

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/

image

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
Copy link
Owner

niklasvh commented Jan 2, 2018

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

@Prabhat2404
Copy link

Hi @niklasvh,

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

@bierx
Copy link

bierx commented Jan 27, 2019

Hi @niklasvh, any idea about this?

@chocolatkey
Copy link

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
Copy link

chocolatkey commented Sep 15, 2019

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):
image

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

@GurvirSingh
Copy link

any updates for this?

@s11rikuya
Copy link

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

@yanghoxom
Copy link

hope someone can handle it

@s11rikuya Can you give more detail?

@marvin-wtt
Copy link

Did anyone find a solution?

@pgn127
Copy link

pgn127 commented Feb 20, 2023

Did anyone find a solution?

switched to dom to image library lol

@pablochi90
Copy link

pablochi90 commented Apr 14, 2023

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
Copy link

Any update?

@marvin-wtt
Copy link

switched to dom to image too

@xulihang
Copy link

Turned to html to image in the end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests