Css Rotate Text Vertical - Extra Space On Both Sides

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of element

Solution 1:

transforms are entirely visual...they do NOT affect the layout of elements. Space is not being added...it's there all the time.

Consider using writing-mode instead.

.rotate {
  writing-mode: vertical-rl;
  text-align: center;
  transform:rotate(180deg);
  background: pink;
  height:100vh;
}

<divclass="rotate"><h2>BACKGROUND</h2><h1 >TITLE</h1></div>

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

Solution 2:

You may try to use writing-mode .

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {
  writing-mode:vertical-rl;
  transform:scale(-1);
  width:50px;
  margin-right:50px;
}

body {
  display:flex;
  align-items:flex-end; 
}

<divstyle="display:inline-block; position:relative;"class="rotate"><spanstyle="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span><spanstyle="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span></div>
Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

---

or transform:rotate(-90deg)(which was your first choice), but with a pseudo to reset height according to text-length. (this requires to use rgba() colors and set both line of text in a single container. https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate {
  width:110px;
}
.rotate>span   {
  display:inline-block; 
  transform:rotate(-90deg)
}
.rotate > span:before {
  content:'';
  padding-top:100%;
  float:left;
}

body {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

<divstyle="display:inline-block; position:relative;"class="rotate"><spanstyle=" font-size: 55px;color: rgba(0,0,0,0.15);white-space: nowrap;">BACKGROUND<br/><spanstyle="display:block;font-size: 45px;color: #222222;text-align:center;">TITLE</span></span></div>
      Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

Both technics here, requires to set a width to the rotating text container and are build from a flex container. It should work in IE,FF,Chrome. (display:table/table-cell can be another display option for older browser)

Solution 3:

Very simple answer

<divclass="fixed-left"><divclass="fixed-left-inner"><divclass="fixed-left-item"><divclass="fixed-left-text">Textmightbeonleftside</div><divclass="fixed-left-text">Textmightbeonleftside</div></div></div></div>.fixed-left{display:block;position:fixed;width:40px;top:0;left:0;background:#fff;z-index:99999;height:100%;}.fixed-left-inner{display:inline-block;vertical-align:bottom;height:100%;}.fixed-left-item{display:block;transform:translate(0,50%)rotate(-90deg);transform-origin:00;vertical-align:bottom;height:100%;margin-top:110px;width:220px;}.fixed-left-text{font-size:13px;line-height:18px;}

Solution 4:

Here you go:

http://jsfiddle.net/9Y7Cm/13205/

vertical-align is the key to answer.