Html2canvas: rotated text by CSS cannot be captured by html2canvas

Created on 28 Mar 2013 · 13Comments · Source: niklasvh/html2canvas

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.

Feature

Source

xiangcao

Most helpful comment

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

jjoe64 on 31 Oct 2015

❤2 👍2

All 13 comments

css transforms aren't supported yet

niklasvh on 28 Mar 2013

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

xiangcao on 29 Mar 2013

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

Jelle-S on 19 Apr 2013

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

MaitreyJukar on 25 Jun 2014

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

luck2011 on 31 Jan 2015

Does anyone find any solution for rotated divs screenshot?

checking12 on 15 Sep 2015

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

jjoe64 on 31 Oct 2015

❤2 👍2

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

brcontainer on 2 Nov 2015

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.

ffflabs on 2 Nov 2015

How i can save div with CSS transform: perspective ?

Drons2p on 7 Aug 2016

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

zk7035 on 20 Oct 2016

@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

brcontainer on 20 Oct 2016

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