I am having difficulty getting text rotation to work properly. I will try to explain this as best as I can and show some results of what I am seeing.
First, if I rotate the text 90 degrees, it looks like it works, but upon closer inspection, it is not quite right. Here is the CSS I am using:
.rotate .pq-title-span {
display: inline-flex;
height: 100px;
width: 100%;
text-align: left;
transform-origin: 50% 20%;
transform: rotate(90deg);
font-size: 11px;
font-family: '3M Circular TT', sans-serif;
border: 1px solid red; /* Added border for visibility */
background-color: lightyellow; /* Added background color for visibility */
}
It appears to work as a side effect and not properly. For the header, I am making the area yellow with a red border to show where it is. I don't have a place to put public images to display what I am seeing, so I will attempt to describe it. The header cell is tall and narrow; when it is rotated 90 degrees, the area becomes wide and short. The text then bleeds out of the rotated area. Visually, this looks fine, but if you truncate the text, it typically cuts off the longer header. However, with the current settings, if we leave the background the same color as the container, it visually looks fine.
Now, if we rotate it 270 degrees, we get a similar result, but the text gets truncated because there is no more room in the container that the header is stored in. I am using the exact same CSS, just changing the rotation to 270 degrees. I have also played with the transform-origin, and while it gets somewhat better, I can never get it to use the entire area of the object containing it.
If I do a simple example in a static HTML page with the following CSS:
.rotate {
position: relative; /* To contain the absolutely positioned span */
display: flex;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
width: 50px; /* Example width */
height: 100px; /* Example height */
border: 1px solid #ddd; /* Just for visual aid */
}
.rotate .pq-title-span {
display: inline-block;
white-space: nowrap; /* Prevents text wrapping */
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add ellipsis to truncated text */
transform-origin: center; /* Pivot point at the center */
transform: rotate(270deg); /* Rotate text 270 degrees counterclockwise */
text-align: center; /* Center text horizontally */
font-size: 10px;
font-family: '3M Circular TT', sans-serif;
position: absolute;
left: 50%; /* Center horizontally */
top: 50%; /* Center vertically */
transform: translate(-50%, -50%) rotate(270deg); /* Adjust position after rotation */
}
It displays as I would expect. However, if I put that same (or similar) CSS in for the grid, I don't get the same behavior.
What can be done to make the 270-degree rotation behave better?
I can provide images or other information if you tell me how to get it to you. I did not see a way to upload a file, just to add links to items on the Internet.
