Share
Tidligere i morges trengte jeg å lage vertikal tekst for et prosjekt jeg jobber med. Etter å ha prøvd et par ideer, tok jeg til Twitter for å finne ut hva slags tanker våre følgere hadde om emnet. Det var mange gode svar og ideer som vi skal gå over i dag!
* Merk - vennligst se "Metode 6" nedenfor for mer informasjon om riktig bruk.Abonner på vår YouTube-side for å se alle videoopplæringene!
Foretrekker å se denne videoen på Screenr?
Accentsconagua
Så, en mulig (men ikke anbefalt) måte å oppnå vertikal tekst på er å legge til
N
E
T
T
U
T
S
Ikke bruk denne metoden. Det er lammet og slurvet.
Med denne metoden pakker vi hver bokstav i et spekter, og setter deretter inn vise til blokkere innenfor vårt CSS.
Vertikal tekst N E T T U T S
Problemet med denne løsningen - annet enn det skremmende oppslaget - er at det er en manuell prosess. Hvis teksten genereres dynamisk fra et CMS, har du lykke til. Ikke bruk denne metoden.
Mitt første instinkt var å dynamisk legge til span tagger med JavaScript. På den måten kommer vi rundt problemene nevnt i metode to.
JS Bin NETTUTS
Denne metoden er definitivt en forbedring. Over, vi dele teksten i en matrise, og deretter pakke inn hver bokstav i a span. Mens vi kunne bruke noe som a til uttalelse eller $ .map å filtrere gjennom matrisen, er en langt bedre og raskere løsning å manuelt bli med og pakke inn teksten samtidig.
Selv om det er bedre, anbefales ikke denne løsningen.
La oss komme vekk fra JavaScript hvis vi kan. Hva om vi brukte en bredde på beholderelementet, og tvunget teksten til å vikle? Det kan fungere.
JS Bin NETTUTS
I dette scenariet bruker vi en svært smal bredde til h1 tag, og gjør deretter sin skriftstørrelse lik den nøyaktige verdien. Til slutt, ved å sette word-wrap lik break-ordet, Vi kan tvinge hvert brev til sin egen linje. derimot, ord-wrap: break-word er en del av CSS3-spesifikasjonen, og er ikke kompatibel over alle nettlesere.
Unntatt eldre nettlesere, løser dette tilsynelatende vårt problem ... men ikke helt. Demoen ovenfor ser ut til å fungere, men det er for risikabelt å spille med pixelverdier. La oss prøve noe så enkelt som å gjøre store bokstaver til små bokstaver.
Yikes; med denne metoden må vi være veldig forsiktige når det gjelder de spesifikke verdiene vi setter. Ikke anbefalt.
avstand mellom bokstavene Som en forholdsregel, og for å utvide metode fire, hvorfor bruker vi ikke ganske stor avstand mellom bokstavene å komme seg rundt dette problemet?
JS Bin Nettuts
Det ser ut til å løse problemet, men igjen bruker vi litt CSS3 her.
ems Alternativt er det en en-liner løsning. Husk da vi lærte det å søke overløp: skjult til et overordnet element ville mirakuløst få det til å inneholde sine flyter? Denne metoden er slik som den! Nøkkelen er å bruke ems, og plasser mellomrom mellom hvert brev.
JS Bin N e tt er s
Ganske pent, ikke sant? Og på denne måten kan du legge til hvilken skriftstørrelse du ønsker. Fordi vi bruker ems - som er lik den x-høyde av den valgte fonten - vi får da mye mer fleksibilitet.
Men, igjen, noen ganger mer enn ett brev vil ende opp på en linje. Du må være trygg; det er derfor jeg har brukt en god størrelse avstand mellom bokstavene for å sikre at det ikke er mer enn ett brev på en linje.
Til min kunnskap på dette tidspunktet er dette den beste, mest kompatible løsningen på tvers av nettleseren.
mellomrom En siste måte å oppnå denne effekten på er å utnytte white-space eiendom.
J E F F R E Y
Ved innstilling white-space til pre, som instruerer teksten til å oppføre seg som om den var innenfor en pre stikkord. Som sådan ærer det enhver avstand som du har lagt til.
Skal det ikke være en CSS3-regel for å utføre denne oppgaven? Hva om jeg kunne sette noe i tråd med: font-display: letter-block; som ville instruere hvert brev til å bli gjengitt som en blokk av slag?
Hva tror du? Har du andre alternativer som vi bør vurdere? Mange foreslo å bruke tekstrotasjon for å oppnå oppgaven, men det er viktig å huske at dette også roterer teksten nitti grader også, noe som ikke er det vi prøver å oppnå.
