Vertikal gedrehten Text mit horizontalem Text ausrichten

Question

Ich spiele mit vertikalem Text als Spanne innerhalb eines Überschriftenelements. Das Problem ist, ich kann nicht herausfinden, wie man den Raum, der zwischen der vertikalen Spannweite und dem Rest des Textinhalts erzeugt wird, beseitigt.

Mit Blick auf die Geige, ich bin auf der Suche nach "We're Just A" direkt neben dem S in Small und der "Striving For A" direkt neben dem "B" in Big Feel.

Was es sieht aus wie jetzt:

Was ich suche

Die HTML zu tun:

<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> 

Die 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

Also im Grunde: Wie man den horizontalen Abstand zwischen gedreht und nicht gedrehten Text mit CSS beseitigen?

Answer 1

Das ist ziemlich hart und scheint, wie Sie hier einige echte Hilfe benötigen :)
Ich werde versuchen, in Code zu erklären:

@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: Durch Hinzufügen white-space: nowrap; können Sie sogar den Text übertreffen die berühmte 8em und immer noch machen es nic ely und typografisch an der Basislinie wie in diesem Beispiel ausgerichtet: https://jsfiddle.net/jf5kwh3t/8/

Um all kleinen Text "Baseline" (wie in der jsFiddle der Demo letzte Zeile) verwenden Sie einfach
text-align: left; ausgerichtet werden.

Answer 2

Dies tut, was Sie fragen, sondern auch die Reihenfolge des Textes.

Durch Umschließen der Wörter in div Tags können wir die Spannen mit absoluter Positionierung links von ihnen positionieren.

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/