Is it possible have vertical text and hortizonal text be side by side?

Question

I'm trying to have pure HTML text rotated vertically and be sided with horizontal HTML text.

Here's a example image of what I want to do. Can someone give me an idea of how to do this?

enter image description here

not in a same element. this might help you http://stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css — Jaak Kütt, Feb 08 '14 at 16:47
Is there any connection between the texts in different directions? Are they going to be a full sentence together? Would it be ok if you had to manually split up the text into separate elements? Or does it need to flow continuously? And what about responsiveness? Is it meant to scale in a fixed or in a fluid way? — Mathijs Flietstra, Feb 08 '14 at 16:54
@Mathijs Flietstra There's no connections between the texts in different directions. So it will be ok to manually split up the text into separate elements. I thought just making each line of text into blocks, but I couldn't figure out how to rotate without messing up their positions. And I should've added I want it to be responsive in a fluid way. — user2133606, Feb 08 '14 at 17:00

score 1 · Accepted Answer · edited May 23 '17 at 10:25

I have had a go at getting something like this to work. Have a look at the result here at jsFiddle.

I'm using a container div which is set to scale while keeping its height relative to its width using this approach.

Inside this container div I have set all div's to be absolutely positioned. To get the positioning of the rotated div's right I have set them to stick to the left bottom corner first, set their transform-origin to 0 0 and then rotated them -90 degrees using transform: rotate(-90deg);, then I have moved the second rotated div along a little by setting its left property.

I'm using em's for positioning to ensure the position of the div's changes depending on the size of their font.

I'm using a jQuery plugin named FitText to tune the div's font-size properties.

I've used transform: scale(); to stretch some of the div's contents.

You'll find it will take a little tuning of the FitText plugin settings, the em values of the div's top and left properties and the scaling to make your texts fit. But once you've got it right it will scale beautifully when changing the width of the container div.

If you want to change the aspect ratio of the container, you'd have to create your own transparent image with the right aspect ratio.

HTML

<div>
    <div class="container">
        <div>ABCDEFGHIJKLMNO</div>
        <div>ABCDEF</div>
        <div>ABCDEFGHIJKLMNO</div>
        <div>HELLO</div>
        <div>QRSTUVWXWZABC</div>
        <div>DEFGHIJKL</div>
    </div>
    <img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>

CSS

html, body {
    width:100%;
    height: 100%;
    font-family:"Arial Black", "Arial Bold", Gadget, sans-serif;
}
body > div {
    position: relative;
}
img {
    display: block;
    width: 100%;
}
div.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px dashed black;
    overflow: hidden;
}
div.container > div {
    width: 100%;
    position: absolute;
    line-height: 1em;
    background-color: #FFF;
}
div.container > div:nth-child(even) {
    -webkit-transform:rotate(-90deg);
    -webkit-transform-origin: 0 0;
    transform:rotate(-90deg);
    transform-origin: 0 0;
    -moz-transform:rotate(-90deg);
    -moz-transform-origin: 0 0;
    bottom: -1em;
}
div.container > div:nth-child(odd) {
    z-index: 1;
}
div:nth-child(3) {
    top: 1.1em;
    left: 1.6em;
}
div.container > div:nth-child(4) {
    left: 1em;
}
div.container > div:nth-child(5) {
    -webkit-transform: scale(1, 2);
    -moz-transform: scale(1, 2);
    transform: scale(1, 2);
    top: 2.8em;
    left: 3.8em;
}
div.container > div:last-child {
    -webkit-transform: rotate(0deg) scale(1, 2);
    -moz-transform: rotate(0deg) scale(1, 2);
    transform: rotate(0deg) scale(1, 2);
    top: 2.3em;
    left: 2.3em;
}

JS

$(function () {
    $("div.container > div:nth-child(1)").fitText(1.15);
    $("div.container > div:nth-child(2)").fitText(0.8);
    $("div.container > div:nth-child(3)").fitText(1.31);
    $("div.container > div:nth-child(4)").fitText(0.75);
    $("div.container > div:nth-child(5)").fitText(1.46);
    $("div.container > div:nth-child(6)").fitText(0.9);
})

score 0 · Answer 2 · answered Feb 08 '14 at 17:47

Here I made an example:

<!doctype html>
 <html>
 <head>
<style type="text/css">.vertical{
 width: 0px;
  word-wrap: break-word;color:grey;float:left;margin-left:10px;}
.horizontal{float:left;margin-left:10px;}
</style>
</head>
  <body>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div><br>
<div class="vertical">abc</div>
<div class="horizontal">l e t t e r s</div>
</body>
</html>

Is it possible have vertical text and hortizonal text be side by side?

2 Answers2