Search code examples
cssdynamicpopulaterotatetransformvertical-text

styling vertical text that is populated dynamically

I am using a sidebar alongside fullscreen.js, that detects which section is currently active/being viewed and displays the title rotated 90 degrees, along a vertical axis.

Because the text is dynamic, the length varies. This is causing problems with styling as the text is rotated: the longer the text, the further away from the left margin it appears, overflowing its boundaries.

If you use the mousewheel to move donw on this example a few sections you will see what is happening: http://jsfiddle.net/pLjrbcL7/2/

some of the CSS I am using to style this element is here:

.vertical-text {
 -ms-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 transform: rotate(270deg);
 font-family:'Raleway', sans-serif;
 float: left;
 font-weight: 300;
 font-size:12px;
 }

 #titleposition {
 position: absolute;
 top: 160px;
 left:5px;
 white-space: nowrap;
 }

im using white-space:nowrap to force all of the text to appear on a single line.

how can i style this span (id="collapsedsectiontitle") so that it always appears in the centre of the sidebar, anchored at the top, regardless of length?

Solution

  • add to '#titleposition' top: 200px; (or other distance from the '#menuarrow' to prevent conflict on the positions). give it also left :50%; for placing it in the middle of '#undermenu'. give '.vertical-text' position: absolute; too and replace the float: left; with width: 100%;. for your request to make the text of '#titleposition' start from the right side, give it direction: rtl;, so we have:

    #titleposition
{
    position: absolute;
    top: 200px;
    left:50%;
    white-space: nowrap;
    direction: rtl;
}

.vertical-text
{
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    font-family:'Raleway', sans-serif;
    position: absolute;
    width: 100%;
    font-weight: 300;
    font-size:12px;
}

    the new result: http://jsfiddle.net/pLjrbcL7/4/