0

I have a client who would like an end user to upload an image which in this instance is super imposed beneath a diary as per the image below.

The end user can scale the photo and move it up/down and left/right, they can also add text (span inside a div container)

<div id="theText" class="productImageOverlay activeText" style="z-index: 7;font-size:20px;">
    <span class="uploadedImage" id="" style="margin-top: -1px; position: absolute;"></span>
</div>

I then work out the width and position of these items (margin-left, margin-top) using the top left hand corner of the external contain as the origin point (0,0) and use PHP to cretaed the composite image with the correct cropping.

This works OK except they would now like to be able to rotate the text which I can do using CSS (add transform: rotate(-90deg); to the span), however, I am struggling how to get the insertion point of the rotated text

I know this could all have been done using the HTML 5 canvas element, but it needs to work with IE8

Any help much appreciated

rotated text

djcamo
  • 297
  • 2
  • 3
  • 14

1 Answers1

0

try using the following code in your css for the text

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

it should rotate the text by 90 degrees and still keep the center point of the text in the center.

Kristofer Aron Sverrisson
  • 111
  • 6
  • 1
    If that doesn't work you could also try rotating the whole div instead of just rotating the text, that way everything inside the div should keep the right proportions. by that I mean that you create the whole book upright and then take that div and rotate it. – Kristofer Aron Sverrisson Aug 26 '14 at 00:00
  • thanks, your pointer above plus adjusting for the text height did the trick, much appreciated – djcamo Aug 26 '14 at 02:29