Share
Tidigare i morse behövde jag skapa vertikal text för ett projekt jag jobbar med. Efter att ha provat några idéer tog jag till Twitter för att hitta vilka slags tankar våra anhängare hade på ämnet. Det fanns gott om bra svar och idéer som vi ska gå över idag!
* Obs! Se "Metod 6" nedan för mer information om korrekt användning.Prenumerera på vår YouTube-sida för att titta på alla videohandledning!
Föredrar att se den här videon på Screenr?
Accentsconagua
Så, ett möjligt (men inte rekommenderat) sätt att uppnå vertikal text är att lägga till
N
E
T
T
U
T
S
Använd inte den här metoden. Det är lamt och slarvigt.
Med den här metoden viklar vi varje bokstav i ett spann och anger sedan dess visa till blockera inom vår CSS.
Vertikal text N E T T U T S
Problemet med den här lösningen - förutom den skrämmande markeringen - är att det är en manuell process. Om texten genereras dynamiskt från ett CMS, har du ingen lycka till. Använd inte den här metoden.
Min första instinkt var att dynamiskt lägga till spänna taggar med JavaScript. På det sättet kommer vi runt de problem som nämns i metod två.
JS Bin NETTUTS
Denna metod är definitivt en förbättring. Ovan, vi dela Texten till en matris, och sedan sätta ihop varje bokstav i en spänna. Medan vi kunde använda något som a för uttalande eller $ MAP att filtrera genom matrisen är en mycket bättre och snabbare lösning att man manuellt går med och sätter ihop texten samtidigt.
Även om det är bättre, rekommenderas inte denna lösning.
Låt oss komma undan från JavaScript om vi kan. Vad händer om vi applicerade en bredd på behållarelementet och tvingade texten att vikas? Det kan fungera.
JS Bin NETTUTS
I detta scenario applicerar vi en mycket smal bredd till h1 tagg och gör sedan dess textstorlek lika med det exakta värdet. Slutligen genom att ställa in word-wrap lika med break-ordet, Vi kan tvinga varje brev till sin egen linje. dock, word-wrap: break-word är en del av CSS3-specifikationen, och är inte kompatibel över alla webbläsare.
Exklusive äldre webbläsare löser detta till synes vårt problem ... men inte helt. Demon ovan verkar fungera, men det är för riskabelt att spela med pixelvärden. Låt oss prova något så enkelt som att vrida versalerna i små bokstäver.
yikes; med denna metod måste vi vara mycket försiktiga när det gäller de specifika värdena vi ställer in. Rekommenderas inte.
teckenavstånd Varför försöker vi inte vara ganska stor, och för att förlänga metod fyra? teckenavstånd att komma runt om problemet?
JS Bin Nettuts
Det verkar fixa problemet, men igen använder vi lite av CSS3 här.
ems Alternativt finns en en-liner-lösning. Kom ihåg när vi lärde oss att tillämpa överflöd: dold till ett moderelement skulle mirakulöst få det att innehålla dess flottor? Denna metod är som sådan! Nyckeln är att använda ems, och placera ett mellanslag mellan varje bokstav.
JS Bin N e tt s s
Ganska snyggt, eller hur? Och på så sätt kan du använda vilken typ av teckensnitt du vill ha. Eftersom vi använder ems - vilket är lika med x-höjd av det valda teckensnittet - vi får då mycket mer flexibilitet.
Men, än en gång kommer ibland mer än ett brev att hamna på en rad. Du måste vara säker det är därför jag har tillämpat godtyckligt stort teckenavstånd för att säkerställa att det aldrig finns mer än ett brev på en rad.
Enligt min kännedom vid denna tidpunkt är det den bästa lösningen som är mest kompatibel med webbläsaren.
blank Ett sista sätt att uppnå denna effekt är att dra nytta av white-space fast egendom.
J E F F R E Y
Genom att sätta white-space till pre, som instruerar texten att bete sig som om den var inom en pre märka. Som sådan hedrar det något avstånd som du har lagt till.
Bör inte det finnas en CSS3 regel för att utföra denna uppgift? Vad händer om jag kan ställa något i linje med: font-display: brev-block; som skulle instruera varje brev att bli gjord som ett block av sorter?
Vad tror du? Har du några andra alternativ som vi bör överväga? Många föreslog att man använde textrotation för att uppnå uppgiften, men det är viktigt att komma ihåg att detta också roterar texten nittiotal, vilket inte är det vi försöker uppnå.
