sforcash sforcash - 2 months ago 13
CSS Question

Align vertical rotated text with horizontal text

I'm playing with some vertical text as a span within a heading element. The problem is I can't figure out how to eliminate the space that's created between the vertical span and the rest of the text content.

Looking at the fiddle, I'm looking to tuck "We're Just A" right up next to the S in Small and the "Striving For A" right next to the 'B' in Big Feel.

What it looks like now:
Non-working version

What I'm looking to do
the goal

The HTML:

<h2>
<span class="smallVertical orangeText">We're Just A</span>
Small<br/>Company<br/>
<span class="smallVertical">Striving For A</span>
<span class="orangeText">Big Feel</span>
</h2>


The CSS:

@import 'https://fonts.googleapis.com/css?family=Oswald';

h2 {
text-align:right;
font-family:'Oswald', sans-serif;
text-transform:uppercase;
font-size:8em;
line-height:1.1em;
}

h2 span.smallVertical {
font-size:12%;
transform: rotate(-90deg);
letter-spacing:0.1em;
float:left;
}

h2 span.orangeText {
color:#FF9900;
}


Fiddle

So basically: How to eliminate the horizontal space between rotated and non-rotated text using CSS?

Answer

This is quite hard and seems like you need some real help here :)
I'll try to explain in code:

@import 'https://fonts.googleapis.com/css?family=Oswald';

h2 {
  text-align: right;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 8em;
  line-height: 1.1em;
}

h2 span.smallVertical {
  font-size: 12%;
  letter-spacing: 0.1em;
  
  /*float: left;                 /* NOOOOOOOOOOOO :) */
  display: inline-block;         /* use this instead of float:left */
  transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */
  width: 8em;                    /* same as font size */
  text-align:center;             /* to center text inside the red thing */
  vertical-align:top;            /* top to "center" span... (yeah I know...) */
  background:rgba(255,0,0,0.1);  /* just to see what the heck we're doing */
  white-space: nowrap;           /* prevent small text wrap at 8em */
}

h2 span.orangeText {
  color: #FF9900;
}
<h2>
  <span class="smallVertical orangeText">We're Just A</span>
  Small<br/>Company<br/>
  <span class="smallVertical">Striving For A</span>
  <span class="orangeText">Big Feel</span>
</h2>

Tip-of-tha-day: By adding white-space: nowrap; you can even make the text exceed the famous 8em and still make it nicely and typographically aligned at the baseline as in this demo: https://jsfiddle.net/jf5kwh3t/8/

To make all small text aligned "baseline" (like in the jsFiddle's demo last line) simply use
text-align: left;.

Comments