Adjust the width of the container and rotate the text accordingly

Question

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line.

My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle:

.rotate {
   transform: rotate(270deg);
}

However, the element's original width and height remains unchanged after rotation, as stated in the specification:

In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.

This causes the container width to expand based on the length of the label text, impacting the position of adjacent charts.

Is there a way to rotate the text and adjust its container size to fit the new width? I welcome any solutions, whether using JavaScript/jQuery or exploring alternative methods.

css transform

Answer 1

Answer №1

I figured out a solution by utilizing absolute positioning. The trick to rotating text is to position it "relative to the border of its closest positioned ancestor". Here's how it works:

Apply position: relative to the container to establish it as the "closest positioned ancestor"
Use position: absolute on the rotated text, positioning it at the bottom of the container (adjusting for line height)
Rotate the text from the top-left corner

Check out the demo on JSFiddle

.container {
  position: relative; /*establish the container as the closest positioned ancestor*/
  border: 1px solid red;
  display: inline-block;
  height: 400px;
  min-width: 30px; /*matched with line-height of rotated text*/
}

.rotate {
  text-align: center;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  width: 400px; /*corresponds with container height*/
  position: absolute;
  bottom: -32px; /*0 = bottom of container, then adjust for (line-height+border)*/
  border: 1px solid blue;
  transform: rotate(-90deg);
  transform-origin: top left;
}

Key Points to Note:

Suitable text width can be defined (e.g. matching the container height)
Assumption of no line breaks in text (single-line approach)

Answer 2

I figured out a solution by utilizing absolute positioning. The trick to rotating text is to position it "relative to the border of its closest positioned ancestor". Here's how it works:

Apply position: relative to the container to establish it as the "closest positioned ancestor"
Use position: absolute on the rotated text, positioning it at the bottom of the container (adjusting for line height)
Rotate the text from the top-left corner

Check out the demo on JSFiddle

.container {
  position: relative; /*establish the container as the closest positioned ancestor*/
  border: 1px solid red;
  display: inline-block;
  height: 400px;
  min-width: 30px; /*matched with line-height of rotated text*/
}

.rotate {
  text-align: center;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
  width: 400px; /*corresponds with container height*/
  position: absolute;
  bottom: -32px; /*0 = bottom of container, then adjust for (line-height+border)*/
  border: 1px solid blue;
  transform: rotate(-90deg);
  transform-origin: top left;
}

Key Points to Note:

Suitable text width can be defined (e.g. matching the container height)
Assumption of no line breaks in text (single-line approach)

Adjust the width of the container and rotate the text accordingly

Answer №1

Similar questions

Adjusting the size of <nav> element to accommodate its child elements

Concealing the TinyNav Drop-Down Menu

The CSS media query isn't functioning properly on Safari browser

How to perfectly position various height <a> elements in a WordPress mega menu

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Matching multiple divs with different ids in PHP using preg_match_all and regex

Click on the logo to return to the home page

Transformation of visuals with alteration of status

Alignment problem in CSS, identical code on two separate servers

Tips for efficiently exporting and handling data from a customizable table

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

Is there a way to automatically click the 'next' arrow on my image slider?

Increase the spacing between the scrollbar and the border

Troubleshooting issue with jquery.backgroundSize.js on Internet Explorer 8

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

Intersection Observer API is not compatible with the functionality of the navigation bar

How to centrally align tabs in Material-UI AppBar using ReactJS

Extract CSS from Chrome developer tools and convert it into a JavaScript object

"Using Flexbox to Align Child Elements of Varying

Remove the color gradient for the column headers in the Google Visualization table