Accentsconagua

De eenvoudigste manier om verticale tekst met CSS te maken

Code
Share

Eerder vanmorgen moest ik een verticale tekst maken voor een project waaraan ik werk. Nadat ik een paar ideeën had uitgeprobeerd, ging ik op Twitter op zoek naar wat voor soort gedachten onze volgelingen over het onderwerp hadden. Er waren veel geweldige reacties en ideeën die we vandaag zullen bespreken!

* Opmerking - raadpleeg "Methode 6" hieronder voor meer informatie over correct gebruik.

Abonneer u op onze YouTube-pagina om alle videozelfstudies te bekijken!
Bekijk deze video liever op Screenr?

Methode 1:
Tags

Dus een mogelijke (hoewel niet aanbevolen) manier om verticale tekst te bereiken is om toe te voegen
tags na elke letter.

 
 N 
E 
T 
T 
U 
T 
S
Bekijk een demo

Gebruik deze methode niet. Het is lam en slordig.

Methode 2: Statische wikkeling

Met deze methode verpakken we elke letter in een reeks en stellen deze vervolgens in tonen naar blok binnen onze CSS. 

     Verticale tekst    
  N   E   T   T   U   T   S
Demo bekijken

Het probleem met deze oplossing - andere dan de angstaanjagende verhoging - is dat het een handmatig proces is. Als de tekst dynamisch wordt gegenereerd via een CMS, heeft u pech. Gebruik deze methode niet.

Methode 3: Gebruik JavaScript

Mijn aanvankelijke instinct was om dynamisch het span tags met JavaScript. Op die manier komen we de problemen die genoemd worden in methode twee tegen. 

     JS Bin    
 NETTUTS
Demo bekijken

Deze methode is absoluut een verbetering. Hierboven, wij spleet de tekst in een array en verpak deze vervolgens in een span. Hoewel we zoiets als een zouden kunnen gebruiken voor verklaring, of $ .map om door de array te filteren, is een veel betere en snellere oplossing om de tekst handmatig aan te sluiten en in te pakken.

Hoewel beter, wordt deze oplossing niet aanbevolen.

  • Zal dit uw lay-out doorbreken als JavaScript is uitgeschakeld??
  • Idealiter zouden we CSS voor deze taak moeten gebruiken, indien mogelijk.

Methode 4: een breedte toepassen op de container

Laten we weg van JavaScript gaan als we kunnen. Wat als we een breedte op het containerelement toepassen en de tekst dwingen om in te pakken? Dat zou kunnen werken.

     JS Bin    
 NETTUTS
Demo bekijken

In dit scenario passen we een zeer smalle breedte toe op de h1 tag en maak het dan lettertypegrootte gelijk aan die exacte waarde. Eindelijk, door in te stellen word-wrap gelijk aan break-woord, we kunnen elke letter op een eigen regel forceren. Echter, word-wrap: break-word maakt deel uit van de CSS3-specificatie en voldoet niet aan alle browsers.

Exclusief oudere browsers lost dit schijnbaar ons probleem op ... maar niet helemaal. De bovenstaande demo lijkt te werken, maar het is te riskant om met pixelwaarden te spelen. Laten we iets eenvoudigs proberen als het omzetten van hoofdletters in kleine letters.

Yikes; met deze methode moeten we heel voorzichtig zijn als het gaat om de specifieke waarden die we stellen. Niet aangeraden.

Methode 5: Toepassen letterafstand

Uit voorzorg en om methode vier uit te breiden, waarom passen we niet vrij groot toe letterafstand om dit probleem te omzeilen?

     JS Bin    
 Nettuts
Demo bekijken

Dat lijkt het probleem op te lossen, maar nogmaals, we gebruiken hier een beetje CSS3.

Methode 6: Gebruik ems

Als alternatief is er een one-liner-oplossing. Weet je nog toen we dat hebben geleerd overloop verborgen aan een ouderelement zou het op miraculeuze wijze zijn drijvers bevatten? Deze methode is zoiets als dat! De sleutel is om te gebruiken ems en plaats een spatie tussen elke letter. 

     JS Bin    
 Niets doet dat
Demo bekijken

Best leuk, toch? En op deze manier kunt u elke gewenste lettergrootte toepassen. Omdat we gebruiken ems - die gelijk is aan de x-height van het gekozen lettertype - we krijgen dan veel meer flexibiliteit.

Maar, nogmaals, soms komt meer dan één letter op een regel terecht. Je moet veilig zijn; daarom heb ik arbitrair groot toegepast letterafstand om ervoor te zorgen dat er nooit meer dan één letter op een regel staat.

Bij mijn weten op dit moment is dit de beste, meest cross-browser compatibele oplossing.

Methode 7: Witte ruimte

Een laatste manier om dit effect te bereiken is om te profiteren van de witte ruimte eigendom. 

         
 J E F F R E Y
Demo bekijken

Door in te stellen witte ruimte naar pre, die de tekst de opdracht geeft om zich te gedragen alsof het zich in een pre label. Als zodanig respecteert het de ruimte die u heeft toegevoegd.

Conclusie

Zou er geen CSS3-regel moeten zijn om deze taak te volbrengen? Wat als ik iets zou kunnen instellen in de trant van: lettertype-weergave: letterblok; waardoor elke letter als een soort blok wordt weergegeven?

Wat denk je? Heeft u andere alternatieven die we moeten overwegen? Veel mensen stelden voor om met behulp van tekstrotatie de taak te volbrengen, maar het is belangrijk om te onthouden dat dit ook de tekst negentig graden roteert, wat niet is wat we proberen te bereiken.

Code
×