CODEWITHSUNDEEP
htmlcss
sforcash
sforcash

Reputation: 429

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?

Upvotes: 5

Views: 1606

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

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 (OR A BIT SMALLER) */
  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;.

Upvotes: 5

OrderAndChaos
OrderAndChaos

Reputation: 3850

This does what you ask, but also maintains the order of the text.

By wrapping the words in div tags we can position the spans to the left of them with absolute positioning.

HTML:

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

CSS:

@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 {
    position: relative;
    text-align: right;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 8em;
    line-height: 1.1em;
}

h2 div {
    position: absolute;
    right: 0;
}

.top {
    top: 0;
}

.mid {
    top: 135px;
}

.bottom {
    top: 270px;
}

h2 span.smallVertical {
    font-size: 12%;
    transform: rotate(-90deg);
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: -66px;
}

.bottom .smallVertical {
    left: -76px
}

h2 span.orangeText {
    color: #FF9900;
}

https://jsfiddle.net/jf5kwh3t/7/

Upvotes: 0

Related Questions