Html2canvas: rotated text by CSS cannot be captured by html2canvas

[xiangcao]

I used css
.heading1 {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg) ;
-o-transform: rotate(270deg) ;
-ms-transform: rotate(270deg) ;
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
}
to display a rotated headline for a chart. then i use html2cavas to 'screenshot' the page, this rotated text cannot be proper displayed. It become a vertical text in which each letter is placed horizontally but aligned with each other vertically. and it looks ugly.

[niklasvh]

css transforms aren't supported yet

[xiangcao]

thanks for replying. I then have to figure out another way to display that vertical text or display it horizontally instead.

[Jelle-S]

Any idea on when this will be supported. I kind of need this pretty bad (css3 matrix3d in particular)

[MaitreyJukar]

Try adding the text content into a span. It worked for me. Still don't know why though...

[luck2011]

@MaitreyJukar wrap text content into a span does not work for me, sad

[checking12]

Does anyone find any solution for rotated divs screenshot?

[jjoe64]

workaround:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html

[brcontainer]

@jjoe64 https://github.com/niklasvh/html2canvas/issues/209#issuecomment-152904727

[ffflabs]

I'm displaying an infographic which contains images, charts and text. Since vertical text in the charts doesn't work, what I'm doing is using canvg to convert each of those charts (which are in c3 SVG) to a canvas, o even going one step further to convert said canvas to an image. This can be done recursively for any SVG group in the DOM.

[Drons2p]

How i can save div with CSS transform: perspective ?

[zk7035]

How i can save div with CSS -webkit-mask-box-image: url(http://kz-c2.qiniudn.com/a.svg); ?

[brcontainer]

@zk7035 As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported. (https://github.com/niklasvh/html2canvas#browser-compatibility)

Details: https://github.com/niklasvh/html2canvas/issues/246

[joseiriarte1982]

Rotate worked form me but with a span I used one of the answers above. Here is what I did in my style I put a class

.vertical {
position: absolute;
left: -50px;
top: 0px;
width: 120px;
height: 20px;
font-size:12px;
color:#333;
transform: rotate(270deg);
}

the in my element a div position inline styled relative and whithin the div a span with class vertical.

<div style="width:100%;float:left;text-align:left;height: 80px;margin-left:25px;border-left:1px solid #000;/*writing-mode: tb-rl;transform: rotate(-180deg);*/height: 100px;font-size:12px;position:relative;"><span class="vertical" style="top:20px;">Articulo No.</span></div>

Hope it helps someone, saludos