ansaurus

Question

Emulation "writing-mode: tb-rl" using jQuery

Answer 1

+1 A:

For the webkit transparency bug, see https://bugs.webkit.org/show_bug.cgi?id=10687 (it was fixed quite recently). A workaround could be to use inline svg instead. I suggest you check out svgboilerplate.com and in particular the forcesvg shim, which makes it easy to do inline svg in html.

If you you don't care about older browsers, then css 2d transforms could probably also do the rotation.

Here's how to do the inline svg solution, using the force-svg.js shim from svgboilerplate.com:

<!DOCTYPE html>
<body>
<style type="text/css"">
.block {
    cursor: default;
    float: left;
    overflow: hidden;
    width: 120px;
    height: 200px;
}

.block object, .block span {
    display: block;
    height: 180px;
    width: 35px;
    padding: 10px 5px;
}

.block img {
    position: absolute;
    width: 200px;
    height: 250px;
}

.text {
    color: #F4F4F4;
    font: 18px arial, helvetica, verdana, tahoma, sans-serif;
    position: relative;
    width: 200px;
    height: 200px;
}
</style>
<div class="block">
   <img src="http://img.sunhome.ru/UsersGallery/Cards/47/29135153.jpg" alt="" title="" />
      <div class="text">
        <svg xmlns='http://www.w3.org/2000/svg'&gt;
           <text x='-195' y='25' font-family='arial' font-size='18' fill='red' transform='rotate(-90)' text-rendering='optimizeSpeed'>
            1. Leona Lewis
           </text>
        </svg>
   </div>
</div>
<script src="force-svg.js"></script>
</body>

Erik Dahlström 2010-09-29 06:58:52

I know about css 2d transforms, but I'd like to understand how this can be done without SVG, Canvas only using JavaScript if it possible

Algorithm 2010-09-29 07:16:53

And i don't understand how to fix the one with https://bugs.webkit.org/show_bug.cgi?id=10687

Algorithm 2010-09-29 07:28:32

ansaurus

tags:

views:

answers:

Emulation "writing-mode: tb-rl" using jQuery

related questions