Accentsconagua

Få tak i hengende tegnsetting

Webdesign
Share

Hengende tegnsetting er et kraftig typografisk verktøy for å lage optisk justerte tekstkropper. Dessverre har det vært stort sett glemt på nettet ... til nå. Vi tar en titt på verdien av hengende tegnsetting og hvordan du delvis kan implementere den ved hjelp av et lite javascript og en CSS-regel som har eksistert i årevis.

Hengende tegnsetting: En primer

Da Gutenberg opprettet sin bibel i 1400-tallet, utviklet han en stil med typegangs-tegnsettingstegn som har opplevd i dag, kalt "hengende tegnsetting" (også kjent som optisk justering).

Hva er hengende tegnsetting?

Hengende tegnsetting er en metode for å sette tegnsettingstegn utenfor margene i en teksttekst. Dette skaper utseendet på en jevn kant i teksten og gir bedre optisk strømning.

Hengende tegnsetting påvirker de slik du oppfatter layoutet av tekst på en side.

Hvor hengende tegnsetting forekommer

Hengende tegnsetting skjer i margene utenfor justeringen av resten av teksten. Du kan henge tegnsetting i venstrejustert, rettjustert eller rettferdig tekst.

Hvorfor vi henger tegnsetting

Teorien bak hvorfor hengende tegnsetting er viktig, går noe slikt:

Tegnsetting i tekst bare tar opp en liten mengde kapphøyde. Vanligvis er dette ikke et problem, men når tegnsettingsmerket er det første tegnet på den rette kanten av en teksttekst, går det en unormal mengde vertikal avstand som kan forstyrre den visuelle strømmen av en teksttekst.

Hengende tegnsetting løser denne forstyrrelsen. Naturligvis vil noen merker falle på kanten av teksten. I stedet for å forlate dem der og forstyrre den optiske strømmen av teksttekst, lindrer typografen avbrudd ved å henge tegnsettene i margene.

Hvilke tegnsettingstegn kan optimaliseres optisk?

Som hengende tegnsetting lindrer forstyrrelsen fra små hakkhøydekarakterer, følger det at du vanligvis skal henge småhøydehøydekarakterer som anførselstegn ("" ") og bindestreker (- -). Du bør unngå å henge høydepunktsintervaller som f.eks. utropstegnet (!) og spørsmålet (?).

Hengende tegnsetting: I utskrift og på nettet

Støtte for hengende tegnsetting i desktop publishing-programmer, som Adobe InDesign, har kommet langt. InDesign gir gode verktøy for å henge tegnsetting i tekstfelter. Selvfølgelig, det er flott for folk som designer med desktop publishing programvare, men hva med webdesignere?

Problemet med å oppnå hengende tegnsetting på nettet er at alt er bygget med bokser. Stilregler i CSS bruker "boxmodellen" som bryter inn alle HTML-elementene i bokser. Disse boksene består av marginer, grenser, polstring og innhold.

Som standard ligger alle teksttekster på nettet i en boks. Hengende tegnsetting, derimot, krever at tegnene skal være utenfor boksen. Dette har vært et vanskelig problem å løse med programvare, så implementering av det typografiske trikset av hengende tegnsetting er stort sett blitt ignorert på nettet, både av designere og nettlesere. Som Mark Boulton sier, er det en stor skam at et så viktig aspekt av typegodkjenning nettopp er blitt feid under teppet.

Hengende tegnsetting og spesifikasjonen

Det kan overraske deg, men hengende tegnsetting er faktisk i CSS3-tekstmodulen. Den hengende tegnsettingsegenskapen er imidlertid merket valgfritt som bidrar til at ingen har implementert det ennå. Faktisk, hvis ikke implementert, er eiendommen "i fare" og kan bli kuttet fra spesifikasjonen i sin CR-periode hvis det ikke finnes noen (korrekte) implementeringer ".

Siden ingen nettlesere har implementert denne egenskapen ennå, vil vi ikke gå inn i implementeringsdetaljer for hengende-tegnsetting eiendom. Men hvis du er nysgjerrig, kan du lese spesifikasjonen selv eller Chris Coyers oversikt over CSS Tricks for mer informasjon.

Punctuation Marks for Hanging

Det er en del verdifull informasjon vi kan hente fra spesifikasjonen. Det beskriver hvilke tegnsettingstegn som skal henges:

U + 002C , KOMMA
U + 002E . FULL STOPP
U + 060C , ARABISK KOMMA
U + 06D4 . ARABISK FULLSTOPP
U + 3001 , IDEOGRAFISK KOMMA
U + 3002 . IDEOGRAFISK FULLSTOPP
U + FF0C , FULL WIDTH COMMA
U + FF0E . FULLVIDTH FULL STOP
U + FE50 , SMALL COMMA
U + FE51 ﹑ LITT IDEOGRAFISK KOMMA
U + FE52 . SMALL FULL STOPP
U + FF61 . HALFWIDTH IDEOGRAFISK FULLSTOPP
U + FF64 , HALFWIDTH IDEOGRAFISK KOMMA

Spesifikasjonen angir at andre tegn kan henges hvis det er hensiktsmessig, noe som er bra da denne listen ikke er omfattende. For eksempel nevner spesifikasjonen ikke bindestrek, hvilken tradisjonell typografi betegner som tegnsetting som er hengende.

Som anbefalt av The Recovering Physicist, vil tradisjonelle vestlige språk sannsynligvis bare henge følgende tegnsettingstegn:

Kodepunkt Karakter Navn HTML-enhet Unicode kategori
U + 00AB " LEFT-POINTING DOBBEL ANGLE QUOTATION MARK « Pi
U + 00BB " RIGHT-POINTING DOBBEL ANGLE QUOTATION MARK » Pf
U + 2018 ' HØYRE ENKELT KVOTASMERK ’ Pi
U + 2018 ' VENSTRE ENKELT KVOTASMERK ‘ Pf
U + 201C “ VENSTRE DOBBELT QUOTATION MARK “ Pi
U + 201D ” RIGHT DOBBLE KVOTASMERK ” Pf
U + 2039 < SINGLE LEFT-POINTING ANGLE QUOTATION MARK ‹ Pi
U + 203A > ENKEL RIGHT-POINTING ANGLE QUOTATION MARK › Pf
U + 2010 - HYPHEN & # X2010; PD
U + 2013 - EN DASH - PD
U + 2014 - EM DASH - PD

For vestlige språk er tegnsettingstegn som bindestreker, perioder, kommaer, kolonner, semikolon osv. Vanligvis hengt i høyre margin, da de vanligvis ikke begynner avsnitt eller vises til venstre margin.

Ta med hengende tegnsetting på nettet nå

Ideelt sett ville du henge alle kvalifiserende tegnsetting i et tekststykke, men dette er nettet og ufullstendig CSS-støtte gjør det vanskelig å fullføre hengende tegnsetting i venstre- og høyrejusterte tekster, samt begrunnede tekster..

Hengende tegnsetting i en enkelt margin, for eksempel venstre margin for venstrejustert tekst, kan være enklere å kontrollere. Blokker nivå elementer som

,

,

gjennom
Etiketter som begynner med kvalifiserende tegnsettingstegn kan bruke en negativ text-indent verdi for å henge tegnsetningen.

Det er verdt å merke seg at hengende tegnsetting bruker en negativ text-indent Vil bare tillate deg å henge tegnsetningen i begynnelsen av et avsnitt. Fordi tekst gjenstrømmes på nettet, avhengig av skjermstørrelse, vet du aldri hvor tegnsettingstegn faller. Begynnpunktsintervallet er den eneste som du kan være sikker på.

Til tross for disse korte hendelsene kan utforsking av mulighetene for hengende begynnelse tegnsetting fortsatt være verdifullt. Det er et typografisk valg du kan lage som designer.

I denne opplæringen vil vi se på hvordan å henge begynnende tegnsetting i tradisjonelle, venstrejusterte vestlige engelske tekster. Husk at koden er formbar. Du kan ta eksemplene i denne opplæringen og justere dem for å passe det du trenger. Forhåpentligvis vil nettlesere i fremtiden bedre løse problemet med hengende tegnsettingstegn.

Trinn 1: Et raskt oversikt

Ideen bak å implementere hengende tegnsetting for venstrejustert tekst er ganske enkelt. Bruk JavaScript for å finne alle kvalifiserte DOM-elementer i sammenheng med et artikkellayout som begynner med hengende tegnsetting. Når det er funnet, bruk en HTML-klasse til elementet som har en negativ verdi for text-indent regel.

Trinn 2: Undersøk Markup

La oss se på et grunnleggende eksempel på markup som brukes til å lage et enkelt blogginnlegg. Teksten til artikkelen vil bli lagt ut i overskrifter, underposisjoner, lister og sitater alle som søskenelementer, slik:

 
Artikkeltittel
 
Noen tekst her ... 
 
"Et avsnitt" som begynner med hengelig tegnsetting ... 
 
En underposisjon for artikkelen
 
Tekst her… 
 
 
Sitert tekst ... 
 
I flere avsnitt ... 
 
 
Mer tekst ... 
 
"En underposisjon" som begynner med tegnsetting
 
Litt mer tekst ... 
 
     
  • Liste tekst ... 
    •  
  • En annen liste element
    •  
 
Mer tekst ... 
 
Siste avsnitt.

Ditt eget oppslagsmønster kan avvike fra dette, i så fall kan du senere justere javascript for å finne DOM-elementer i henhold til hvordan markeringen din er lagt ut. For denne opplæringen bruker vi dette enkle oppslagsmønsteret.

For å henge begynnende tegnsetting for elementer innenfor en blokk med tekst må vi først avgrense hvilke skilletegn som kan henges, som vi analyserte tidligere i opplæringen. Det er viktig å huske at forskjellige språk bruker anførselstegn (og tegnsetting) i mange forskjellige manerer. For eksempel, ta en titt på hvordan engelsk og walisisk bruker primære og sekundære anførselstegn:

  • Engelsk: Jeg fortalte Johnny, "Mark Twain sa en gang:" Hvis du forteller sannheten, trenger du ikke å huske noe. ""
  • walisisk: Jeg fortalte Johnny, "Mark Twain sa en gang," Hvis du forteller sannheten, trenger du ikke å huske noe. "'

Legg merke til hvordan de er komplette motsetninger? Disse forskjellene er bare begynnelsen. Ta en titt på dette eksemplet på bruk av primær og sekundær anførselstegn på bare en håndfull språk (du kan se en større kompilering på Wikipedia):

Språk primær~~POS=TRUNC sekundær
Engelsk "..." '...'
walisisk '...' "..."
kroa~~POS=TRUNC "..." '...'
tysk "..." '...'
gresk "..." "..."
fransk "..." <...>

Det er godt å være oppmerksom på disse forskjellene, så hvis du noensinne må jobbe med andre språk enn vestlige engelsk, vil du få en fastere forståelse av hvilke tegnsettingstegn du skal hengende.

Trinn 3: Sette opp CSS

Nå har vi noen grunnleggende oppslag for vår tekstlayout. Vi vil bruke JavaScript til å analysere hver av de DOM-objektene og finne de som begynner med hengelig tegnsetting. For de som begynner med kvalifiserende tegnsetting, vil vi bruke en HTML-klasse med en negativ verdi for text-indent regelen som vil henge tegnsetting i venstre margin.

Den vanskelige delen her kommer i å definere verdien av din text-indent regel. Ulike skrifter vil kreve forskjellige verdier, så dette vil ta litt tilpasning og tilpassing fra din side. For eksempel har et smart dobbeltsats (") en tykkere bredde enn et smart enkelt sitat ('). Derfor, hvis du henger tegnsetting, vil DOM-elementet som begynner med et smart dobbeltsatt, kreve en større verdi for text-indent regelen enn et DOM-element som begynner med et smart enkelt sitat.

En notat på skrifttyper

Ikke bare vil text-indent verdien er forskjellig avhengig av bredden på tegnsettingstegnet du henger, men det vil også avhenge av skrifttypen du bruker. Selvfølgelig er dette nettet, og du kan ikke alltid sikre at en bruker vil bruke et bestemt skrifttype. Imidlertid har trygge skrifttyper en god ubiquity, mens ikke-trygge skrifttyper har noen ganske kulebeskyttende metoder for å betjene bestemte skrifttyper til klienter. Uansett kan du komme ganske nært til å sikre at alle ser samme skrifttype.

Uansett hvilken skrifttype eller skriftstabel du ender med, er det godt å forhåndsvise og justere din text-indent verdier på per-font basis (og helst i forskjellige størrelser). Dette sikrer at de hengende tegnsettene dine stemmer overens.

Hengende tegnsettingsklasser

Forutsatt at alle elementene i vårt innlegg bruker samme skrifttype, kan vi sette opp tre klasser som definerer tre bredder: små, mellomstore og store. Avhengig av hvilken type tegnsetting det begynner med, vil JavaScript bruke en av disse tre klassene til DOM-elementet og dermed gi oss hengende tegnsetting!

.indent-small text-indent: -.2325em .indent-medium text-indent: -.4125em .indent-large text-indent: -.6125em

Legg merke til at vi bruker em målinger. Dette sikrer text-indent vil alltid være i forhold til skriftstørrelse av teksten i artikkelen. Så hvis skriftstørrelsen er økt, trenger du ikke å endre text-indent verdier.

Hengende tegnsettingsklasser: To skrifttyper

Men hva om du bruker to forskjellige skrifttyper i layoutet ditt? I eksemplet bruker vi kropps tekstelementene våre (

    ) bruk en sans-serif skrifttype (Helvetica Neue, Arial fallback) mens våre overskrifter (

    ) bruk et annet sans-serif-skrift (Source Sans Pro). Tegnsettene til Source Sans Pro er, i henhold til design, bredere enn Helvetica Neue og Arial. DOM-elementer som er satt i Source Sans Pro (overskrifter) vil dermed kreve litt større text-indent verdier enn DOM-elementer angitt i Helvetica Neue (lister, avsnitt osv.).

    Dette er lett nok til å håndtere ved å legge til flere klasser spesielt for overskrifter. Vi vil bare bruke JavaScript for å oppdage elementtypen, og deretter bruke den aktuelle klassen.

    .indent-header-small text-indent: -.325em .indent-header-medium text-indent: -.5125em .indent-header-large text-indent: -.7125em

    Trinn 4: Sette opp en funksjon i JavaScript

    Nå som vi har markeringen og CSS vi trenger, skal vi bruke JavaScript for å oppdage DOM-elementer som er direkte etterkommere av vår artikkelbeholder. Vi sjekker deretter for å se om disse DOM-elementene begynner med tegnsettingstegn som skal henges.

    For å begynne, vil vi opprette en funksjon som vil inneholde all vår kode. Denne funksjonen tar et argument, som er DOM-elementet som inneholder teksten vi vil analysere for hengende tegnsetting, for eksempel beholderen til et blogginnlegg.

    / * * Hengende tegnsetting * Denne funksjonen tar et DOM-element, * søker hver av sine direkte etterkommere, * og, hvis elementet begynner med hengelig tegnsetting, * brukes den aktuelle HTML-klassen til elementet. * * Da får foreldre DOM-elementet en klasse for å aktivere * barnklassene vi brukte. * / funksjon hengepunkt (container) // kode går her

    Merk: Hengende tegnsetting er et aspekt av progressiv forbedring. I dette eksemplet skal vi bruke innfødt JavaScript som ikke støttes fullt ut i eldre nettlesere (ser på deg IE). Hvis du vil få dette til å fungere i eldre nettlesere, kan du gjøre det. De fleste ting vi skal gjøre er å velge elementer fra DOM og endre klassene sine. Du kan enkelt inkorporere jQuery for å gjøre dette, eller du kan bruke hjelpefunksjoner fra youmightnotneedjquery.com

    Trinn 5: Definere tegnsettingstegnene

    Vi må lage en liste over hengbare tegnsetting. Ved å bruke tegnene som vi tidligere definerte som referanse, kan vi opprette et objekt i JavaScript som definerer tegnsettene våre (ved Unicode-poengene):

    // Tegnsettingstegn som kvalifiserer til å bli hengt var merker = '\ u201c': 'medium', // "- ldquo - venstre smart dobbelt quote '\ u2018': 'liten', // '- lsquo - venstre smart singel quote '\ u0022': 'medium', // "- ldquo - venstre dumme dobbelttalat '' '' ', //' - lsquo - venstre dumt enkelt sitat '\ u00AB': 'stort', // "- laquo - venstre dobbeltvinkelkvote '\ u2039': 'medium', // <- lsaquo - venstre enkeltvinkelsitat '\ u201E': 'medium', //" - bdquo - venstre smart dobbelt lavt tilbud "\ u201A ':' liten ', //' - sbquo - venstre smart enkelt lavt tilbud;

    Som du kan se, definerer vi en liste over tegnsettingstegn vi vil henge med en tilsvarende breddedefinisjon som samsvarer med våre HTML-klasser. Dette objektet forteller oss hvilke tegnsettingstegn som skal henges og hvor store deres negative text-indent verdien bør være. Denne listen er ikke omfattende. Skjønnheten er at vi slår over hele listen, så du kan legge til flere tegnsettingstegn i denne listen etter behov.

    Trinn 6: Looping over hvert barnelement

    Nå skal vi løse over alle direkte etterkommere av vårt inneholdende element (som ble sendt inn i funksjonen). For å gjøre det, vil vi først sette opp en til løkke:

    // Loop over alle direkte etterkommere av containeren // Hvis det er en blokkquote, sløyfe over sine direkte etterkommere for (i = 0; i 
    Neste (inne i til loop) vil vi opprette en variabel som heter el som representerer hver direkte etterkommer element av beholderen vi slår over (få et elements etterkommere ved hjelp av .barn eiendom):
     
    var el = container.children [i];
     
    Nå skal vi passere vår el variabel til en annen funksjon (hangIfEligible ()), som vil sjekke for å se om det begynner med et skilletegn som kan henges. Hvis det gjør det, vil denne andre funksjonen bruke riktig HTML-klasse til elementet.
     
    hvis (el.tagName === 'BLOCKQUOTE') for (var k = 0; k < el.children.length; k++)  hangIfEligible(el.children[k]); ;  else  hangIfEligible(el);  
     
    Legg merke til hva vi gjorde med blockquote stikkord? Fordi blockquote elementer kan ha etterkommere elementer som begynner med hengende tegnsetting (som 
     tag), vi må også sløyfe over hver av sine barn. Så hvis det nåværende elementet vi slår over er en blockquote tag, vi løper over hver av sine barn og sender dem til vår hangIfEligible () funksjon. Hvis det ikke er en blockquote element, vi sender bare det nåværende elementet selv til hangIfEligible () funksjon.
     
    Hvis vi ikke snakket spesielt over barna til blockquote element, vi ville savne sine barn og en sjanse til å henge tegnsetting.
    Våre til loop skulle nå se slik ut:
     
    // Loop over alle direkte etterkommere av containeren // Hvis det er en blokkquote, sløyfe over sine direkte etterkommere for (i = 0; i 
    Trinn 7: Henger tegnsetningen
     
    Vi har passert det nåværende barnelementet til vår hangIfEligible () funksjon. Så nå la oss definere hva den funksjonen gjør:
     
    // Sjekk om det innpassede elementet // begynner med en av de kvalifiserende tegnsettingstypene. // Hvis det gjør, må du bruke den aktuelle klassen, avhengig av tagtypefunksjonen, hangIfEligible (el) // -koden går her 
     
    Som du ser, har vi en funksjon som heter hangIfEligible () som tar en parameter: DOM-elementet vi kontrollerer for begynnelse tegnsetting.
     
    Få elementets tekst
     
    La oss nå lage variablene vi trenger. Først må vi få teksten i DOM-elementet. For å gjøre det, bruker vi innertext JavaScript-egenskapen. Fordi dette ikke fungerer i Firefox, bruker vi også textcontent eiendom som gjør.
     
    var text = el.innerText || el.textContent; 
     
    Sette opp HTML-klassenavnet
     
    Fordi vårt eksempel bruker to forskjellige skrifter (en for overskrifter, en for kopi), trenger vi to forskjellige klasser for de to forskjellige elementtyper.
     
    Hvis du husker, våre HTML-klasser som styrer negativet text-indent følg navngivningsmønsteret innrykk- og deretter bredden på tegnsettingstegnet (liten, middels eller stor). Hvis elementet er en topptekst, legger vi til Overskrift- mellom dem. Så klassen for liten bredde tegnsetting er innrykk-small for vanlig kopi og strekpunkt-header-small for overskrifter.
     
    I vårt JavaScript lager vi en variabel for HTML-klassen vår og legger til Overskrift- senere hvis den nåværende taggen er et overskriftselement.
     
    var htmlClass = 'indent-'; 
     
    Kontrollerer elementet for begynnelse tegnsetting
     
    La oss nå sjekke og se om teksten til vårt nåværende DOM-element begynner med et av tegnsettene som vi definerte tidligere. For å gjøre det, slår vi over hvert av oppføringene i vår merker variabel der vi definerte tegnsettingene vi vil henge. Da bruker vi JavaScript oversikt over egenskap for å sjekke og se om det første tegnet elementets tekst samsvarer med et av tegnsettene våre.
     
    for (var mark i merker) if (text.indexOf (mark) === 0) // Hvis det samsvarer, kode her 
     
    En oppdatering på oversikt over: JavaScript er oversikt over ser på en streng der hvert tegn er et element i en matrise. For eksempel, var text = 'en streng' ville se slik ut ['En streng']. De oversikt over Egenskapen tar et tegn og søker i hele gruppen som ser etter det tegnet. Hvis den finner den, returnerer den tegnets posisjon i matrisen. Så, i vårt tilfelle søker vi etter et bestemt tegnsettingstegn. Hvis den er funnet i den aller første posisjonen i arrayet (indeks 0), begynner teksten vår med hengende tegnsetting.
     
    Legge til en klasse
     
    Nå er alt vi trenger å gjøre, legg til en klasse for elementet hvis det første tegnet av teksten stemmer overens med et av tegnsettene våre.
     
    I vårt eksempel, hvis elementet begynner med et kvalifiserende tegnsettingstegn, må vi sjekke om det nåværende elementet er en header (som våre overskrifter trenger endrede HTML-klasser). Så i den delen vi hadde // hvis det samsvarer, kode her vi vil si dette:
     
    hvis (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName === 'H3' || el.tagName === 'H4' || el.tagName = == 'H5') htmlClass + = 'header-'; el.classList.add (htmlClass + merker [mark]); 
     
    Se hva vi gjorde? Hvis det nåværende elementet var en overskrift av noe slag, ble vi vedlagt Overskrift- til HTML-klassenavnet. HTML-klassen som blir lagt til i DOM-elementet, er konstruert slik:
     
       
    •  innrykk- som standard
      •  
    •  Overskrift- vedlagt hvis det nåværende elementet er et overskrift
      •  
    •  liten, medium, eller stor lagt til avhengig av gjeldende tegnsettingstegnets definerte bredde
      •  
     
    Alt koden sammen
     
    Alt den koden sammen vil se slik ut:
     
    // Sjekk om det innpassede elementet // begynner med en av de kvalifiserende tegnsettingstypene. // Hvis det gjør, må du bruke den aktuelle klassen avhengig av tagtype-funksjonen hangIfEligible (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; for (var mark i merker) if (text.indexOf (mark) === 0) if (el.tagName === 'H1' || el.tagName === 'H2' || el.tagName = == 'H3' || el.tagName === 'H4' || el.tagName === 'H5') htmlClass + = 'header-'; el.classList.add (htmlClass + merker [mark]);  
     
    Trinn 8: Kjør funksjonen på sidelast
     
    Nå er alt du trenger å gjøre, kjør funksjonen når siden laster. Du kan gjøre dette med noen få linjer med kode:
     
    window.onload = function () var container = document.querySelector ('post') hangPunctuation (container); container.classList.add ( 'hang-tegnsetting');  
     
    Se hva vi gjorde her? Ring hangPunctuation funksjon og passere i det inneholdende DOM-elementet i tekstteksten der du vil henge tegnsetting.
     
    Legg merke til at vi legger til en klasse i containerelementet. Du kan bruke denne klassen til å henge 
       Lister om du vil. Bare legg til noe CSS slik: .Hang-punktum ul margin: 0; polstring: 0: liste-stil-posisjon: utenfor;
       
      Den endelige koden
       
      Det er det! Vi er alle ferdige. Her er den endelige koden:
       
      / * * Hengende tegnsetting * Denne funksjonen tar et DOM-element, * søker hver av sine direkte etterkommere, * og, hvis elementet begynner med hengelig tegnsetting, * brukes den aktuelle HTML-klassen til elementet. * * Da får foreldre DOM-elementet en klasse for å aktivere * barnklassene vi brukte. * / funksjon hengepunkt (container) // Tegnsett som kvalifiserer til å bli hengt var merker = '\ u201c': 'medium', // "- ldquo - venstre smart dobbeltsats '\ u2018': 'liten', / / '- lsquo - venstre smart enkelt sitat' \ u0022 ':' medium ', // "- ldquo - venstre dumt dobbelt quote' \ 'small', // '- lsquo - left dumb single quote' \ u00AB ':' stor ', // "- laquo - venstre dobbeltvinkel sitat' \ u2039 ':' medium ', // <- lsaquo - venstre enkeltvinkelsummer' \ u201E ':' medium ', //" - bdquo - venstre smart dobbelt lavt sitat '\ u201A': 'lite', // '- sbquo - venstre smart enkelt lavt tilbud; // Loop over alle direkte etterkommere av containeren // Hvis det er en blokkquote, sløyfe over sine direkte etterkommere for (i = 0; i 
      Det er godt å huske at denne løsningen på ingen måte er omfattende. Det vil mest sannsynlig kreve tweaking for hvert prosjekt det brukes til, fordi hvert prosjekt skiller seg i skrifttypevalg, markupstruktur osv. Men hvis du legger ut langformet tekst, kan denne løsningen bidra til å legge til litt typografisk forfining til layoutet ditt.
       
      Supplerende lesing:
       
         
      • Hengende tegnsetting på CSS-triks
        •  
      • Mark Boulton på hengende tegnsetting
        •  
      • Hengende tegnsetting i CSS3 av The Recovering Physicist
        •  
      • Harry Roberts dekker hengende kulepoeng og blokkeringer på Smashing Magazine
        •  
      En alternativ tilnærming
      Siden publisering av denne artikkelen har andre også chimed inn med sine ideer. Ta en titt på kommentarene, og du vil finne Gunnar Bittersmanns inspirerende ta på CSS vi har diskutert. Lane Olson kombinerte selv disse tankene med min JavaScript for å lage en demo på Codepen.
      



      
	
      	
			
	   
	
      

      



      
Webdesign
×