-1

I have a div that is full height, 100% of its parent, and I would like to have text written from the bottom to the top, instead of left to right. So, I would like to rate the text 90 degrees counter clockwise, and also fill the div it is inside, maybe as a background svg is a solution?, i dont know :(

The width of the div container is unknown as its part of a responsive layout. I have linked to an image of what the goal is:

https://i.stack.imgur.com/MtXh9.png

html, body{
  height:100%;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
}
<div class="a">
HELLO WORLD!
</div>
nicole
  • 19
  • 5

2 Answers2

0

EDIT: Another way is shown below the first snippet

probably css transforms would be enough for this situation.

rotate(-90deg); will rotate the text

translateX(-100%) will fix the position (which originally would overflow on the top of the container

transform-origin: 0 0; tells the browser to apply those transformations from the top-left corner.

Here it is how it looks. Be aware that handling overflows is not easy if you use css transforms.

html, body{
  height:100%;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
}
.rotated {
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    display: inline-block;
    max-width: 100vh;
}
<div class="a">
   <span class="rotated">
      HELLO WORLD!
   </span>
</div>

A different way to do this, would be to use the css property "writing-mode". This should be the best solution to create vertical text, but it will only let you write from top to bottom, and not from bottom to top. To circumvent this problem, we could flip the element both vertically and horizontally using transform: scale(-1) or scale: -1. This solution might be a better fit in situations that would be complicated because of the text overflow (but it will create weird effects if you try to select the text).

html, body{
  height:100%;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
}
.rotated {
    writing-mode: vertical-rl;
    scale: -1;
}
<div class="a">
   <span class="rotated">
      HELLO WORLD!
   </span>
</div>
Drago96
  • 1,265
  • 10
  • 19
  • how can i make sure the text stretches top to bottom? do i need javascript for that? – nicole Sep 23 '22 at 13:22
  • Hi, I have edited the code. Let me know if this is what you want. – Rizeen Sep 23 '22 at 13:29
  • text goes outside the container in my chrome browser – nicole Sep 23 '22 at 13:53
  • Yes, that's why I said that handling overflow is not easy. In this specific circumstance, where the container is 100% the height of the browser, you could add `max-width: 100vh;` to the rotated class. Beware that this is not easily repeatable in different situations, it's strictly binded to the fact that the text will span at max to the whole screen height. This solution will break the text into multiple lines. If you want your font size to scale, that's an entirely different beast. I've updated my code in the answer – Drago96 Sep 23 '22 at 15:50
  • It's `max-width` and not `max-height` because, after rotating it 90 degrees, the width becomes the height and viceversa. – Drago96 Sep 23 '22 at 15:52
0

Try adding transform: rotate(-90deg); to the .a class

html, body{
  height:100%;
}
body{
  display:flex;
  justify-content:center;
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
  transform: rotate(-90deg);
}
<div class="a">
HELLO WORLD!
</div>
Rizeen
  • 1,296
  • 1
  • 6
  • 17