Hangende interpunctie is een krachtige typografische tool voor het creëren van optisch uitgelijnde tekstdelen. Helaas is het tot nu toe grotendeels vergeten op het internet ... We zullen kijken naar de waarde van hangende interpunctie en hoe je deze gedeeltelijk kunt implementeren met een beetje javascript en een CSS-regel die al jaren bestaat.
Hangende interpunctie: een primer
Toen Gutenberg in de jaren 1400 zijn Bijbel aan het maken was, ontwikkelde hij een stijl van typografische leestekens die tot op de dag van vandaag heeft bestaan, "hangende interpunctie" (ook bekend als optische uitlijning).
Wat is hangende interpunctie?
Hangende interpunctie is een methode om leestekens in te stellen buiten de marges van een tekstlichaam. Dit zorgt voor de verschijning van een uniforme rand in de tekst en zorgt voor een betere optische stroom.
Hangende interpunctie heeft invloed op de manier waarop u de opmaak van tekst op een pagina waarneemt.
Waar hangende interpunctie optreedt
Hangende interpunctie vindt plaats in de marges buiten de uitlijning van de rest van de tekst. U kunt interpunctie in links uitgelijnde, rechts uitgelijnde of uitgevulde tekst laten hangen.
Waarom we de interpunctie ophangen
De theorie achter waarom hangende interpunctie belangrijk is, gaat ongeveer als volgt:
Leestekens in tekst nemen slechts een kleine hoeveelheid dophoogte in beslag. Gewoonlijk is dit geen probleem, maar wanneer het leesteken het eerste teken op de rechte rand van een tekstlichaam is, laat het een abnormale hoeveelheid verticale tussenruimte achter wat de visuele stroom van een tekstlichaam kan verstoren.
Hangende interpunctie lost deze onderbreking op. Uiteraard vallen er wat markeringen op de rand van de tekst. In plaats van ze daar achter te laten en de optische stroom van het tekstlichaam te verstoren, verlicht de typograaf de verstoring door de leestekens in de marges op te hangen.
Welke leestekens kunnen optisch worden uitgelijnd?
Omdat hangende interpunctie de verstoring van kleine pethoogtemarkeringen verlicht, moet u over het algemeen kleine hoogtemarkeringen zoals aanhalingstekens ("" ") en koppeltekens (- -) ophangen. Vermijd het ophangen van leestekens op volledige dophoogte, zoals het uitroepteken (!) en vraagteken (?).
Hangende interpunctie: in print en op het web
Ondersteuning voor het voorkomen van interpunctie in desktop publishing-programma's, zoals Adobe InDesign, heeft een lange weg afgelegd. InDesign biedt geweldige hulpmiddelen voor het ophangen van interpunctie in tekstlichamen. Dat is natuurlijk geweldig voor mensen die ontwerpen met desktop publishing-software, maar hoe zit het met webontwerpers?
Het probleem met het bereiken van hangende interpunctie op het web is dat alles is opgebouwd met vakken. Stijlregels in CSS gebruiken het "boxmodel" dat alle HTML-elementen in omsluitende vakjes verpakt. Deze vakken bestaan uit marges, randen, opvulling en inhoud.
Standaard bevinden alle teksttekens op internet zich in een vak. Hangende interpunctie vereist daarentegen dat tekens worden buiten de doos. Dit was een lastig probleem om met software op te lossen, dus het implementeren van de typografische truc van hangende interpunctie is grotendeels genegeerd op het web, zowel door ontwerpers als browsermakers. Zoals Mark Boulton opmerkt, is het een grote schande dat een dergelijk belangrijk aspect van het zetwerk net onder het tapijt is geveegd.
Hangende interpunctie en de specificatie
Het zal je misschien verbazen, maar hangende interpunctie zit eigenlijk in de CSS3-tekstmodule. De hangende interpunctie-eigenschap is echter gemarkeerd als optioneel, wat ertoe bijdraagt dat niemand het nog heeft geïmplementeerd. Als het onroerend goed niet wordt geïmplementeerd, is het "in gevaar en kan het gedurende de CR-periode van de specificatie worden geknipt als er geen (juiste) implementaties zijn".
Omdat er nog geen browsers zijn die deze eigenschap hebben geïmplementeerd, gaan we niet in op implementatiegegevens voor de opknoping-interpunctie eigendom. Als je nieuwsgierig bent, kun je de spec zelf of Chris Coyer's overzicht over CSS Trucs lezen voor meer informatie.
Leestekens om te hangen
Er is één stuk waardevolle informatie die we uit de specificatie kunnen halen. Het geeft aan welke leestekens moeten worden opgehangen:
U + 002C
,
KOMMA
U + 002E
.
PUNT
U + 060C
,
ARABISCHE COMMA
U + 06D4
.
ARABISCHE VOLLEDIGE STOP
U + 3001
,
IDEOGRAFISCHE COMMA
U + 3002
.
IDEOGRAFISCHE VOLLEDIGE STOP
U + FF0C
,
VOLLEDIGHEID COMMA
U + FF0E
.
VOLLEDIG VOLLEDIGE STOPPEN
U + FE50
,
KLEINE COMMA
U + FE51
﹑
KLEINE IDEOGRAFISCHE COMMA
U + FE52
.
KLEINE VOLLEDIGE STOP
U + FF61
.
HALFWIDTH IDEOGRAFISCHE VOLLEDIGE STOP
U + FF64
,
HALFWIDTH IDEOGRAFISCHE COMMA
De specificatie geeft aan dat andere karakters eventueel kunnen worden opgehangen, wat goed is omdat deze lijst niet volledig is. De specificatie vermeldt bijvoorbeeld geen streepjes, die traditionele typografie aanduidt als interpunctie die het waard is om op te hangen.
Zoals aanbevolen bij The Recovering Physicist, zullen traditionele westerse talen waarschijnlijk alleen de volgende leestekens ophangen:
Codeer punt
Karakter
Naam
HTML-entiteit
Unicode-categorie
U + 00AB
"
LINKS PUNTEN DUBBEL HOEK OFFERTE MARKERING
«
Pi
U + 00BB
"
RECHTS-RICHTING DUBBELE HOEK OFFERTE MARKERING
»
pf
U + 2018
'
JUISTE OFFERTE MARK
’
Pi
U + 2018
'
LINKERIG OFFERTEERMARKT
‘
pf
U + 201C
“
LINKER DUBBEL OFFERTEMARKT
“
Pi
U + 201D
”
JUISTE DUBBELE OFFERTEMARKT
”
pf
U + 2039
<
ENKELVOUDIG LINKERICHTINGSTEKEN MARKERING
‹
Pi
U + 203A
>
ENKEL RECHTS-RICHTEND HOEK OFFERTEERMARKT
›
pf
U + 2010
-
KOPPELTEKEN
& # X2010;
PD
U + 2013
-
EN DASH
-
PD
U + 2014
-
EM DASH
-
PD
Voor Westerse talen worden leestekens zoals streepjes, punten, komma's, dubbele punten, puntkomma's, enz. Over het algemeen in de rechtermarge gehangen omdat ze normaal geen alinea's beginnen of in de linkermarge verschijnen.
Hangende interpunctie nu naar het web brengen
Idealiter zou je alle kwalificerende interpunctie in een alinea van de tekst ophangen, maar dit is het web en onvolledige CSS-ondersteuning maakt het moeilijk om hangende interpunctie in links en rechts uitgelijnde teksten en gerechtvaardigde teksten volledig te implementeren..
Hangende interpunctie in een enkele marge, bijvoorbeeld de linkermarge voor links uitgelijnde tekst, kan eenvoudiger worden beheerd. Blokniveau-elementen zoals , , door tags die beginnen met kwalificerende leestekens, kunnen een negatief gebruiken tekst streepje waarde om de interpunctie op te hangen.
Het is vermeldenswaard dat opknoping interpunctie met een negatief tekst streepje staat u alleen toe om de interpunctie helemaal aan het begin van een alinea op te hangen. Omdat tekst opnieuw wordt gestreamd op internet, afhankelijk van de schermgrootte, weet u nooit waar leestekens uitvallen. Het begin leesteken is de enige waarvan u zeker bent van de positie.
Ondanks deze tekortkomingen, kan het nog steeds waardevol zijn om de mogelijkheden te onderzoeken om de begininterpunctie op te hangen. Het is een typografische keuze die je als ontwerper kunt maken.
In deze zelfstudie zullen we kijken naar het ophangen van beginpunctuatie in traditionele links uitgelijnde West-Engelse teksten. Onthoud dat code kneedbaar is. U kunt de voorbeelden in deze zelfstudie gebruiken en deze aanpassen aan de behoeften die u heeft. Hopelijk kunnen browsers in de toekomst het probleem van hangende leestekens beter oplossen.
Stap 1: een snel overzicht
Het idee achter hangende interpunctie voor links uitgelijnde tekst is vrij eenvoudig. Gebruik JavaScript om alle geschikte DOM-elementen te vinden in de context van een artikellay-out die begint met ophangbare interpunctie. Wanneer gevonden, past u een HTML-klasse toe op het element met een negatieve waarde voor de tekst streepje regel.
Stap 2: De markup onderzoeken
Laten we eens kijken naar een eenvoudig voorbeeld van markeringen die worden gebruikt om een eenvoudige blogpost in te delen. De tekst van het artikel zou worden opgemaakt in rubrieken, subkoppen, lijsten en citaten, allemaal als broers elementen, zoals deze:
Artikel titel
Een beetje tekst hier ...
"Een alinea" die begint met hangbare interpunctie ...
Een subtitel voor het artikel
Tekst hier…
Geciteerde tekst ...
In meerdere alinea's ...
Meer tekst ...
"A Subheading" Beginnend met interpunctie
Nog wat tekst ...
Tekst weergeven ...
Een tweede lijstitem
Meer tekst ...
Laatste paragraaf.
Uw eigen markup-patroon kan hiervan afwijken, in welk geval u later het JavaScript kunt aanpassen om DOM-elementen te vinden op basis van hoe uw markup is opgemaakt. Voor deze zelfstudie gebruiken we dit eenvoudige markup-patroon.
Om de begininterpunctie voor elementen in een tekstblok op te hangen, moeten we eerst bepalen welke leestekens kunnen worden opgehangen, die we eerder in de zelfstudie hebben geanalyseerd. Het is belangrijk om te onthouden dat verschillende talen gebruik maken van aanhalingstekens (en interpunctie) op zeer uiteenlopende manieren. Bekijk bijvoorbeeld hoe Engels en Welsh primaire en secundaire aanhalingstekens gebruiken:
Engels: Ik zei tegen Johnny, "Mark Twain zei ooit:" Als je de waarheid vertelt, hoef je je niets te herinneren. "
Wels: Ik zei tegen Johnny, 'Mark Twain zei ooit:' Als je de waarheid vertelt, hoef je je niets te herinneren. ''
Merk op hoe ze complete tegenpolen zijn? Die verschillen zijn slechts het begin. Bekijk dit voorbeeld van het gebruik van primaire en secundaire aanhalingstekens in slechts een handvol talen (u kunt een grotere compilatie bekijken op Wikipedia):
Taal
primair
Tweede
Engels
"..."
'...'
Wels
'...'
"..."
Kroatisch
"..."
'...'
Duitse
"..."
'...'
Grieks
"..."
"..."
Frans
"..."
<...>
Het is goed om rekening te houden met deze verschillen, dus als u ooit met andere talen dan West-Engels moet werken, krijgt u een beter begrip van de leestekens die u moet plaatsen.
Stap 3: De CSS instellen
Nu hebben we wat basismarkeringen voor onze tekstlay-out. We zullen JavaScript gebruiken om elk van die DOM-objecten te analyseren en degene te vinden die beginnen met ophangbare interpunctie. Voor degenen die beginnen met kwalificerende interpunctie, passen we een HTML-klasse toe met een negatieve waarde voor tekst streepje regel die de interpunctie in de linkermarge zal ophangen.
Het lastige deel hier komt in het definiëren van de waarde van jouw tekst streepje regel. Verschillende lettertypen zullen verschillende waarden vereisen, dus dit zal wat aanpassingen en aanpassingen van uw kant vergen. Een slim dubbel aanhalingsteken (") heeft bijvoorbeeld een dikkere breedte dan een slimme enkele aanhalingsteken ('). Als u dus interpunctie oploopt, heeft het DOM-element dat begint met een slim dubbel aanhalingsteken een grotere waarde nodig voor de tekst streepje regel dan een DOM-element dat begint met een slimme enkele aanhalingsteken.
Een opmerking over lettertypen
Niet alleen zal de tekst streepje De waarde kan verschillen afhankelijk van de breedte van het leesteken dat u nu ophangt, maar dit hangt ook af van het lettertype dat u gebruikt. Dit is natuurlijk het web en je kunt er niet altijd voor zorgen dat een gebruiker een bepaald lettertype gebruikt. Webveilige lettertypen hebben echter een goede alomtegenwoordigheid, terwijl niet-webveilige lettertypen een aantal zeer kogelvrije methoden hebben voor het aanbieden van specifieke lettertypen aan clients. Hoe dan ook, je kunt vrij dichtbij komen om ervoor te zorgen dat iedereen hetzelfde lettertype ziet.
Welk lettertype of welke lettertypestapel u ook gebruikt, het is goed om een voorbeeld van uw lettertype te bekijken en aan te passen tekst streepje waarden per lettertype (en bij voorkeur in verschillende grootten). Dit zorgt ervoor dat uw hangende leestekens correct worden uitgelijnd.
De hangende interpunctie klassen
Ervan uitgaande dat alle elementen van onze post hetzelfde lettertype gebruiken, kunnen we drie klassen instellen die drie breedten definiëren: klein, middelgroot en groot. Afhankelijk van het type interpunctie waarmee het begint, past ons JavaScript een van deze drie klassen op het DOM-element toe, waardoor we hangende interpunctie krijgen!
Merk op dat we gebruiken em afmetingen. Dit zorgt voor de tekst streepje zal altijd relatief zijn ten opzichte van de lettertypegrootte van de tekst in het artikel. Dus als de lettergrootte wordt verhoogd, hoeft u het lettertype niet te wijzigen tekst streepje waarden.
De hangende interpunctie klassen: twee lettertypen
Maar wat als u twee verschillende lettertypen in uw lay-out gebruikt? In het voorbeeld dat we gebruiken, onze lichaamstekstelementen (
) gebruik een schreefloos lettertype (Helvetica Neue, Arial fallback) terwijl onze koppen (
) gebruik een ander schreefloos lettertype (Source Sans Pro). De leestekens van Source Sans Pro zijn, door het ontwerp, breder dan die van Helvetica Neue en Arial. DOM-elementen die zijn ingesteld in Source Sans Pro (headers) zullen dus iets groter worden vereist tekst streepje waarden dan DOM-elementen ingesteld in Helvetica Neue (lijsten, paragrafen, enz.).
Dit is eenvoudig genoeg om te behandelen door extra klassen toe te voegen die specifiek zijn voor headers. We zullen JavaScript alleen gebruiken om het elementtype te detecteren en vervolgens de juiste klasse toepassen.
Nu we de opmaak en CSS hebben die we nodig hebben, gaan we JavaScript gebruiken om DOM-elementen te ontdekken die directe afstammelingen zijn van onze artikelcontainer. We controleren vervolgens of die DOM-elementen beginnen met leestekens die moeten worden opgehangen.
Om te beginnen, zullen we een functie creëren die al onze code zal bevatten. Deze functie neemt één argument, namelijk het DOM-element dat de tekst bevat die we willen parsen voor hangende interpunctie, bijvoorbeeld de container van een blogpost.
/ * * Hangende interpunctie * Deze functie neemt een DOM-element, * doorzoekt elk van zijn directe afstammelingen, * en, als het element begint met ophangbare interpunctie, * wordt de juiste HTML-klasse toegepast op het element. * * Vervolgens krijgt het bovenliggende DOM-element een klasse om * de onderliggende klassen die we hebben toegepast te activeren. * / function hangPunctuation (container) // code gaat hier
Notitie: hangende interpunctie is een aspect van progressieve verbetering. In dit voorbeeld gebruiken we native JavaScript dat niet volledig wordt ondersteund in oudere browsers (kijkend naar IE). Als je dit in oudere browsers wilde laten werken, zou je het kunnen doen. De meeste dingen die we zullen doen, zijn elementen uit de DOM selecteren en hun klassen wijzigen. Je zou jQuery eenvoudig kunnen gebruiken om dit te doen, of je zou helper-functies kunnen gebruiken van youmightnotneedjquery.com
Stap 5: De leestekens definiëren
We moeten een lijst met ophangbare interpunctie maken. Met behulp van de tekens die we eerder als referentie hebben gedefinieerd, kunnen we een object in JavaScript maken dat onze leestekens definieert (op basis van hun Unicode-punten):
// Leestekens die in aanmerking komen om te worden opgehangen var marks = '\ u201c': 'medium', // "- ldquo - left smart double quote '\ u2018': 'small', // '- lsquo - left smart single quote '\ u0022': 'medium', // "- ldquo - left dumb double quote '\ u0027': 'small', // '- lsquo - left dumb enkel citaat' \ u00AB ':' large ', // "- laquo - links dubbele hoekcitaat '\ u2039': 'medium', // <- lsaquo - links éénhoekcitaat '\ u201E': 'medium', //" - bdquo - links slim dubbel laag citaat '\ u201A ':' small ', //' - sbquo - left smart single low quote;
Zoals je ziet, definiëren we een lijst met leestekens die we willen ophangen met een overeenkomstige breedtedefinitie die overeenkomt met onze HTML-klassen. Dit object vertelt ons welke leestekens moeten worden opgehangen en hoe groot hun negatief is tekst streepje waarde zou moeten zijn. Deze lijst is niet volledig. Het mooie is dat we de hele lijst doorlopen, zodat u indien nodig extra leestekens aan deze lijst kunt toevoegen.
Stap 6: Elk child-element in een lus plaatsen
Nu gaan we alle directe afstammelingen van ons bevattend element (dat in de functie is overgegaan) doorlopen. Om dit te doen, zullen we eerst een voor lus:
// Loop over alle directe afstammelingen van de container // Als het een blockquote is, loop dan over zijn directe afstammelingen voor (i = 0; i
Volgende (binnen de voor lus) maken we een variabele genaamd el die elk direct nakomelingselement van de container vertegenwoordigt waar we overheen lussen (haal de afstammelingen van een element met behulp van de .kinderen eigendom):
var el = container.children [i];
Nu zullen we onze doorgeven el variabele naar een andere functie (hangIfEligible ()), die zal controleren om te zien of het begint met een leesteken dat kan worden opgehangen. Als dit het geval is, past deze andere functie de juiste HTML-klasse op het element toe.
if (el.tagName === 'BLOCKQUOTE') for (var k = 0; k < el.children.length; k++) hangIfEligible(el.children[k]); ; else hangIfEligible(el);
Let op wat we deden met de blockquote label? Omdat blockquote elementen kunnen afstammelingen hebben die beginnen met hangende interpunctie (zoals de tag), we moeten ook over elk van zijn kinderen lopen. Dus als het huidige element waar we overheen lopen een is blockquote tag, we lussen over elk van zijn kinderen en geven ze door aan onze hangIfEligible () functie. Als het geen is blockquote element, we geven het huidige element zelf door aan de hangIfEligible () functie.
Als we niet specifiek de kinderen van de blockquote element, we zouden zijn kinderen missen en een kans om interpunctie op te hangen.
Onze voor loop zou er nu ongeveer zo uit moeten zien:
// Loop over alle directe afstammelingen van de container // Als het een blockquote is, loop dan over zijn directe afstammelingen voor (i = 0; i
Stap 7: De interpunctie ophangen
We hebben het huidige onderliggende element doorgegeven aan ons hangIfEligible () functie. Laten we nu dus definiëren wat die functie doet:
// Controleer of het ingelaste element // begint met een van de kwalificerende interpunctietypen // Als dat het geval is, past u de juiste klasse toe afhankelijk van de tagtype-functie hangIfUnable (el) // code gaat hier
Zoals je kunt zien, hebben we een functie met de naam hangIfEligible () die één parameter in beslag neemt: het DOM-element dat we controleren op beginnende interpunctie.
De tekst van het element ophalen
Laten we nu de variabelen maken die we nodig hebben. Eerst moeten we de tekst binnen het DOM-element krijgen. Om dit te doen, zullen we de innerText JavaScript-eigenschap. Omdat dit niet werkt in Firefox, gebruiken we ook de textContent eigendom dat doet.
var text = el.innerText || el.textContent;
De HTML Class Name instellen
Omdat ons voorbeeld twee verschillende lettertypen gebruikt (een voor koppen, een voor kopieën), hebben we twee verschillende klassen nodig voor de twee verschillende elementtypen.
Als je je dat herinnert, onze HTML-klassen die het negatieve besturen tekst streepje volg het naampatroon inspringen- en vervolgens de breedte van het leesteken (klein, middelgroot of groot). Als het element een kop is, voegen we toe hoofd- tussen hen. Dus de klas voor leestekens van kleine breedte is streepje-small voor normale kopie en streepje-header-small voor koppen.
In ons JavaScript maken we een variabele voor onze HTML-klasse en voegen we deze toe hoofd- later als de huidige tag een headingelement is.
var htmlClass = 'indent-';
Controle van het element voor het begin van interpunctie
Laten we nu eens kijken of de tekst van ons huidige DOM-element begint met een van de leestekens die we eerder hebben gedefinieerd. Om dit te doen, doorlopen we elk van de items in onze merken variabele waarin we de leestekens hebben gedefinieerd die we willen ophangen. Dan gebruiken we JavaScript's index van eigenschap om te controleren en te zien of het eerste teken de tekst van het element overeenkomt met een van onze leestekens.
for (var mark in marks) if (text.indexOf (mark) === 0) // Als het overeenkomt, hier coderen
Vernieuwen op index van: JavaScript's index van kijkt naar een tekenreeks waarbij elk teken een element in een array is. Bijvoorbeeld, var text = 'A String' zou er zo uitzien ['Een touwtje']. De index van property neemt een personage en zoekt de hele array op zoek naar dat personage. Als het het vindt, wordt de positie van het personage in de array geretourneerd. Dus in ons geval zoeken we naar een bepaald leesteken. Als het in de allereerste positie van de array (index 0) wordt gevonden, begint onze tekst met ophangbare interpunctie.
Een klasse toevoegen
Nu hoeven we alleen maar een klasse aan het element toe te voegen als het eerste teken van de tekst overeenkomt met een van onze leestekens.
In ons voorbeeld, als het element begint met een kwalificerend leesteken, moeten we controleren of het huidige element een header is (aangezien onze headers aangepaste HTML-klassen nodig hebben). Dus in het gedeelte waar we hadden // als het overeenkomt, hier coderen we zullen dit plaatsen:
Zie je wat we gedaan hebben? Als het huidige element een soortnaam was, voegden we eraan toe hoofd- naar de HTML-klassennaam. De HTML-klasse die wordt toegevoegd aan ons DOM-element is als volgt opgebouwd:
inspringen- standaard
hoofd- toegevoegd als het huidige element een header is
klein, medium, of groot toegevoegd, afhankelijk van de gedefinieerde breedte van het huidige leesteken
Alle code samen
Al die code samen zou er als volgt uitzien:
// Controleer om te zien of het ingelaste element // begint met een van de kwalificerende interpunctietypen // Als dat het geval is, past u de juiste klasse toe afhankelijk van de tagtype-functie hangIfUnable (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; for (var mark in marks) 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 + markeert [mark]);
Stap 8: Voer de functie uit bij het laden van pagina's
Nu hoeft u alleen maar de functie uit te voeren wanneer de pagina wordt geladen. U kunt dit doen met een paar regels code:
window.onload = function () var container = document.querySelector ('. post') hangPunctuation (container); container.classList.add ( 'hang-interpunctie');
Zie je wat we hier hebben gedaan? Bel de hangPunctuation functie en geef het bevattende DOM-element door van het tekstgedeelte waarbinnen interpunctie moet worden opgehangen.
Merk op dat we een klasse toevoegen aan het containerelement. Je kunt deze klasse gebruiken om op te hangen
geeft een lijst als je wilt. Voeg gewoon wat CSS toe zoals: .hang-interpunctie ul margin: 0; opvulling: 0: lijst-stijl-positie: buiten;
De definitieve code
Dat is het! We zijn allemaal klaar. Hier is de definitieve code:
/ * * Hangende interpunctie * Deze functie neemt een DOM-element, * doorzoekt elk van zijn directe afstammelingen, * en, als het element begint met ophangbare interpunctie, * wordt de juiste HTML-klasse toegepast op het element. * * Vervolgens krijgt het bovenliggende DOM-element een klasse om * de onderliggende klassen die we hebben toegepast te activeren. * / function hangPunctuation (container) // Leestekens die in aanmerking komen om te worden opgehangen var marks = '\ u201c': 'medium', // "- ldquo - left smart double quote '\ u2018': 'small', / / '- lsquo - left smart single quote' \ u0022 ':' medium ', // "- ldquo - left dumb double quote' \ u0027 ':' small ', //' - lsquo - left dumb single quote '\ u00AB ':' large ', // "- laquo - links dubbele hoekcitaat' \ u2039 ':' medium ', // <- lsaquo - links enkele hoekcitaat' \ u201E ':' medium ', //" - bdquo - linker slimme dubbele lage quote '\ u201A': 'small', // '- sbquo - linker slimme enkele lage quote; // Loop over alle directe afstammelingen van de container // Als het een blockquote is, loop dan over zijn directe afstammelingen voor (i = 0; i
Het is goed om te onthouden dat deze oplossing op geen enkele manier volledig is. Het zal hoogstwaarschijnlijk tweaken vereisen voor elk project waar het op gebruikt is, omdat elk project verschilt qua lettertype-keuzes, opmaakstructuur, enz. Maar als je longform-tekst opmaakt, kan deze oplossing helpen om een beetje typografische verfijning aan je lay-out toe te voegen.
Aanvullende lezing:
Hangende interpunctie op CSS-trucs
Mark Boulton op hangende interpunctie
Hangende interpunctie in CSS3 door The Recovering Physicist
Harry Roberts behandelt ophangpunten en blockquotes over Smashing Magazine
Een alternatieve aanpak
Sinds de publicatie van dit artikel hebben ook anderen hun ideeën overgenomen. Bekijk de reacties en je zult de inspirerende kijk van Gunnar Bittersmann op de CSS die we hebben besproken zien. Lane Olson combineerde die gedachten zelfs met mijn JavaScript om een demo te maken op Codepen.
Accentsconagua
Share
