How do I rotate individual letters and keep them flowing left-to-right?

Question

I am trying to get a string with each individual letter rotated 90 degrees; however, I want to keep the "flow" of letters going left-to-right, not vertical. I also want to keep that "strikethrough" horizontal green line (see images below).

What's the simplest way to accomplish this? I prefer using JavaScript and/or CSS.

With the -transform: rotate CSS style I get the following:

do not want

<style type="text/css">
.rotate {
-webkit-transform: rotate(-90deg);
}
</style>
<body>
<div class="rotate">
<span style="color:#0C0; text-decoration:line-through;">
<span style="color:#000;">
A B C
</span></span></div>

What I would like to get is something like this, without resorting to a custom font.

enter image description here

@GionaF Yes, I just tried span and div right now. Doesn't do what I want jsfiddle.net/UsMxL/1 jsfiddle.net/UsMxL — Tina CG Hoehr, Sep 27 '12 at 22:41
You just need a proper display like inline-block: jsfiddle.net/UsMxL/3 — Wesley Murch, Sep 27 '12 at 22:54

Giona · Accepted Answer · 2012-09-27 22:51:24Z

Pure CSS:

<div class="letters">
    <span>A</span><span>B</span><span>C</span>
</div>

.letters {
    height:8px;
    line-height:16px;
    border-bottom:1px solid green;
    position:relative;
}
.letters > span {
    float:left;
    -webkit-transform: rotate(-90deg);
}

Demo

With the "auto-spanner" function by @Matt Whipple it'll be easier to write a long text and wrap it into spans! — Giona, Sep 27 '12 at 22:56
In my case float:left caused unwanted side effects (no pun intended) but display:inline-block gave the same result with no problems. — arlomedia, Oct 4 '18 at 18:00

Matt Whipple · Accepted Answer · 2012-10-09 11:05:59Z

Here's some js that should do the trick: http://jsfiddle.net/AYGDR/8/

$(function() {
    $(".target").html(("<span>" + $(".target").html().split(" ").join("</span><span>") + "</span>"));
    var rotate = 0;
    $(".target span").each(function() {
        rotate = rotate - 90
        $(this).css({
            "-webkit-transform": "rotate(" + rotate + "deg)",
            "display": "inline-block"
        });
    });
});

And I accidentally threw in some bonus shifting rotation since I imagined that was part of the question.

user3270791 · Accepted Answer · 2014-11-13 15:18:23Z

my CSS:

<style>
span[class^="rot"]:not([char]):before{
content: '\27b7'; }
span[class^="rot"][char]:before{content: attr(char);}
span[class^="rot"] { position: relative; }
span[class^="rot"]:before {
 position: relative; display: inline-block;
 font-weight: bold; font-size: 16px; line-height:16px;
 font-family: Tahoma, Verdana, sans-serif;
 margin:0;padding:0;
 width:16px;height:16px;
}
.rot-90:before { transform: rotate(-90deg); }
.rot90:before  { transform: rotate(90deg); }
.rot45:before { transform: rotate(45deg); }
.rot-45:before { transform: rotate(-45deg); }
.rot180:before { transform: rotate(180deg); }
</style>
<p>
A long time <span class=rot90 style="color: green"></span> ago  in a  
<span class=rot-45 char="G"></span>alax<span class=rot180 char="y"></span> 
&nbsp; <span class=rot-90 char="F"></span>ar far 
a<span class=rot45 char="w"></span>way

result

xception · Accepted Answer · 2012-09-27 22:46:33Z

0

This works in latest version of chrome

<span style="color:#000; display: inline-block; max-width: 10px;">
A B C
</span>

only wrote the innermost span though

answered Sep 27 '12 at 22:46

xception

3,82813 silver badges25 bronze badges

@Daedalus I believe this screenshot strongly disagrees with you simplest-image-hosting.net/png-0-hb2865%0A – xception Sep 27 '12 at 22:54
I really would like to keep the text at the top of the page also – Tina CG Hoehr Sep 27 '12 at 22:58
@Daedalus yes it does exactly that... as you can see in the developer tools open in the image it's exactly the code I had there, and just FYI I tested it before posting – xception Sep 27 '12 at 23:00
@Daedalus The rest of the code was in the original posting and contains no modifications, and my answer states clearly that I only wrote the innermost span... if you don't like that keep your +1... I won't update an already correct answer just for you – xception Sep 27 '12 at 23:05
@xception It wasn't just for me; it was for everyone else. I missed that last bit, so +1 anyway. – Daedalus Sep 27 '12 at 23:07

| show 1 more comment

How do I rotate individual letters and keep them flowing left-to-right?

4 Answers 4

Your Answer

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Hot Network Questions

How do I rotate individual letters and keep them flowing left-to-right?

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged html css or ask your own question.

Linked

Related

Hot Network Questions