La punteggiatura sospesa è un potente strumento tipografico per la creazione di corpi di testo allineati otticamente. Sfortunatamente, è stato in gran parte dimenticato sul web ... fino ad ora. Daremo un'occhiata al valore della punteggiatura sospesa e a come è possibile implementarla parzialmente usando un piccolo javascript e una regola CSS che esiste da anni.
Punteggiatura sospesa: un primer
Quando Gutenberg stava creando la sua Bibbia nel 1400, sviluppò uno stile di segni di punteggiatura che ha resistito fino ad oggi, chiamato "punteggiatura sospesa" (noto anche come allineamento ottico)..
Cos'è la punteggiatura sospesa?
La punteggiatura sospesa è un metodo per impostare i segni di punteggiatura al di fuori i margini di un corpo di testo. Ciò crea l'aspetto di un bordo uniforme nel testo e consente un flusso ottico migliore.
Appesantire gli impatti di punteggiatura come se percepissi il layout del testo su una pagina.
Dove si verifica punteggiatura sospesa
La punteggiatura sospesa si verifica nei margini all'esterno dell'allineamento del resto del testo. Puoi appendere la punteggiatura nel testo allineato a sinistra, allineato a destra o giustificato.
Perché appendiamo la punteggiatura
La teoria alla base del perché la punteggiatura sospesa è importante va in questo modo:
I segni di punteggiatura nel testo occupano solo una piccola quantità di altezza del cappuccio. Normalmente questo non è un problema, ma quando il segno di punteggiatura è il primo carattere sul bordo dritto di un corpo di testo, lascia una quantità anormale di spaziatura verticale che può interrompere il flusso visivo di un corpo di testo.
La punteggiatura sospesa risolve questo problema. Naturalmente, alcuni segni cadranno sul bordo del testo. Piuttosto che lasciarli lì e interrompere il flusso ottico del corpo del testo, il tipografo allevia l'interruzione appendendo i segni di punteggiatura ai margini.
Quali segni di punteggiatura possono essere allineati otticamente?
Poiché la punteggiatura sospesa attenua l'interruzione dei segni di altezza dei berretti piccoli, ne consegue che in genere si devono appendere segni di altezza del cappuccio piccolo come virgolette ("" ") e trattini (- -). Evitare di appendere segni di punteggiatura dell'altezza del tappo intero come il punto esclamativo (!) e il punto interrogativo (?).
Punteggiatura sospesa: in stampa e sul Web
Il supporto per la punteggiatura sospesa nei programmi di desktop publishing, come Adobe InDesign, ha fatto molta strada. InDesign offre ottimi strumenti per appendere la punteggiatura nei corpi di testo. Ovviamente, questo è ottimo per le persone che progettano l'utilizzo di software di desktop publishing, ma per quanto riguarda i web designer?
Il problema con il raggiungimento di punteggiatura sospesa sul web è che tutto è costruito con scatole. Le regole di stile nei CSS usano il "modello di casella" che racchiude tutti gli elementi HTML nelle caselle di contenimento. Queste caselle sono costituite da margini, bordi, riempimento e contenuto.
Per impostazione predefinita, tutti i caratteri di testo sul Web risiedono in una casella. La punteggiatura sospesa, al contrario, richiede che i caratteri siano al di fuori la scatola. Questo è stato un problema difficile da risolvere con il software, quindi l'implementazione del trucco tipografico di appendere la punteggiatura è stata ampiamente ignorata sul web, dai progettisti e dai creatori di browser. Come afferma Mark Boulton, è un vero peccato che un aspetto così importante della composizione tipografica sia stato appena spazzato sotto il tappeto.
Punteggiatura sospesa e Spec
Potrebbe sorprendervi, ma la punteggiatura sospesa è in realtà nel modulo di testo CSS3. La proprietà di punteggiatura sospesa, tuttavia, è contrassegnata come facoltativa, il che contribuisce al fatto che nessuno lo ha ancora implementato. Infatti, se non implementata, la proprietà è "a rischio e può essere tagliata dalla specifica durante il suo periodo di CR se non ci sono implementazioni (corrette)".
Poiché nessun browser ha ancora implementato questa proprietà, non entreremo nei dettagli di implementazione per hanging-punteggiatura proprietà. Tuttavia, se sei curioso, puoi leggere la specifica stessa o la panoramica di Chris Coyer su Trucchi CSS per maggiori informazioni.
Segni di punteggiatura per appendere
C'è un pezzo di preziose informazioni che possiamo raccogliere dalle specifiche. Specifica i segni di punteggiatura da appendere:
U + 002C
,
VIRGOLA
U + 002E
.
PUNTO
U + 060C
,
COMMA ARABO
U + 06D4
.
ARABO FULL STOP
U + 3001
,
COMMA IDEOGRAFICO
U + 3002
.
FERMO COMPLETO IDEOGRAFICO
U + FF0C
,
COMMA COMPLETO
U + FF0E
.
FULLWIDTH FULL STOP
U + FE50
,
PICCOLO COMMA
U + FE51
﹑
PICCOLA COMMA IDEOGRAFICA
U + FE52
.
PICCOLO STOP COMPLETO
U + FF61
.
FULL STOP IDEOGRAFICO DI HALFWIDTH
U + FF64
,
COMMA IDEOGRAFICO DI HALFWIDTH
La specifica afferma che altri caratteri possono essere appesi se appropriato, il che è buono in quanto questo elenco non è completo. Ad esempio, la specifica non menziona trattini, che la tipografia tradizionale denota come punteggiatura degna di impiccagione.
Come raccomandato da The Recovering Physicist, le lingue occidentali tradizionali probabilmente appenderanno solo i seguenti segni di punteggiatura:
Punto Codice
Personaggio
Nome
Entità HTML
Categoria Unicode
U + 00AB
"
CONTRASSEGNO DI QUOTAZIONE DOPPIO ANGOLO DI PUNTO SUCCESSIVO
«
Pi
U + 00BB
"
MARCHIO DI QUOTAZIONE DOPPIO ANGOLO A DESTRA
»
Pf
U + 2018
'
GIUSTO SINGOLO MARCHIO DI QUOTAZIONE
’
Pi
U + 2018
'
MARCHIO DI QUOTAZIONE SINGOLO SINISTRO
‘
Pf
U + 201C
“
MARCHIO DI QUOTAZIONE DOPPIA SINISTRA
“
Pi
U + 201D
”
GIUSTO DOPPIO CONTRASSEGNO DI QUOTAZIONE
”
Pf
U + 2039
<
SEGNO DI QUOTAZIONE ANGOLO SINGOLO SINISTRO
‹
Pi
U + 203A
>
MARCHIO DI QUOTAZIONE DI UN ANGOLO DI PUNTO SINGOLO DESTRA
›
Pf
U + 2010
-
TRATTINO
& # X2010;
PD
U + 2013
-
EN DASH
-
PD
U + 2014
-
EM DASH
-
PD
Per le lingue occidentali, i segni di punteggiatura come trattini, punti, virgole, due punti, punto e virgola, ecc, sono generalmente appesi al margine destro in quanto normalmente non iniziano i paragrafi o appaiono sul margine sinistro.
Portare la punteggiatura sospesa sul web ora
Idealmente dovresti appendere tutti i segni di punteggiatura qualificanti in un paragrafo di testo, ma questo è il Web e il supporto CSS incompleto rende difficile implementare completamente la punteggiatura sospesa nei testi allineati a sinistra e a destra e nei testi giustificati.
La punteggiatura sospesa in un singolo margine, ad esempio il margine sinistro per il testo allineato a sinistra, può essere più facile da controllare. Elementi a livello di blocco come , , attraverso i tag che iniziano con segni di punteggiatura qualificanti possono utilizzare un segno negativo indentatura del testo valore per appendere la punteggiatura.
Vale la pena notare che sospendere la punteggiatura usando un negativo indentatura del testo ti consentirà solo di appendere la punteggiatura all'inizio di un paragrafo. Poiché il testo scorre nuovamente sul Web a seconda delle dimensioni dello schermo, non si sa mai dove cadranno i segni di punteggiatura. Il segno di punteggiatura iniziale è l'unico di cui si può essere sicuri.
Nonostante queste brevi scoperte, esplorare le possibilità di appendere la punteggiatura iniziale può ancora essere prezioso. È una scelta tipografica che puoi fare come designer.
In questo tutorial vedremo come appendere la punteggiatura iniziale nei tradizionali testi in inglese occidentale allineati a sinistra. Ricorda che il codice è malleabile. Puoi prendere gli esempi in questo tutorial e modificarli per adattarli a qualsiasi esigenza tu abbia. Si spera che in futuro i browser risolveranno meglio il problema dei segni di punteggiatura sospesi.
Passaggio 1: una panoramica rapida
L'idea alla base dell'implementazione della punteggiatura sospesa per il testo allineato a sinistra è piuttosto semplice. Utilizza JavaScript per trovare tutti gli elementi DOM idonei nel contesto di un layout di articolo che inizia con la punteggiatura appendibile. Una volta trovato, applicare una classe HTML all'elemento che ha un valore negativo per indentatura del testo regola.
Passaggio 2: Esame del markup
Diamo un'occhiata ad un semplice esempio di markup usato per impaginare un semplice post sul blog. Il testo dell'articolo verrebbe presentato in titoli, sottotitoli, elenchi e citazioni come elementi di pari livello, come questo:
Titolo dell'articolo
Qualche testo qui ...
"Un paragrafo" che inizia con la punteggiatura appesa ...
Un sottotitolo per l'articolo
Testo quì…
Testo citato ...
In più paragrafi ...
Altro testo ...
"Un sottotitolo" che inizia con la punteggiatura
Qualche altro testo ...
Elenca testo ...
Un secondo elemento dell'elenco
Altro testo ...
Ultimo paragrafo.
Il tuo schema di markup potrebbe differire da questo, nel qual caso puoi in seguito modificare il javascript per trovare gli elementi DOM in base a come il tuo markup è disposto. Per questo tutorial, useremo questo semplice modello di markup.
Per appendere la punteggiatura iniziale per elementi all'interno di un blocco di testo, dobbiamo prima delineare quali segni di punteggiatura possono essere appesi, che abbiamo analizzato in precedenza nel tutorial. È importante ricordare che lingue diverse usano marchi di citazione (e punteggiatura) in modi molto diversi. Ad esempio, dai un'occhiata a come inglesi e gallesi usano le virgolette primarie e secondarie:
Inglese: Ho detto a Johnny, "Mark Twain una volta disse: 'Se dici la verità, non devi ricordare nulla'".
gallese: Ho detto a Johnny, "Mark Twain una volta disse:" Se dici la verità, non devi ricordare nulla ".
Notate come sono gli opposti completi? Quelle differenze sono solo l'inizio. Dai un'occhiata a questo esempio di utilizzo di virgolette primarie e secondarie in una manciata di lingue (puoi vedere una compilation più ampia su Wikipedia):
linguaggio
Primario
Secondario
Inglese
"..."
'...'
gallese
'...'
"..."
croato
"..."
'...'
Tedesco
"..."
'...'
greco
"..."
"..."
francese
"..."
<...>
È bene essere consapevoli di queste differenze, quindi se mai dovessi lavorare con lingue diverse dall'inglese occidentale avrai una presa più ferma su quali segni di punteggiatura dovresti essere appeso.
Passaggio 3: impostazione del CSS
Ora abbiamo un markup di base per il nostro layout di testo. Useremo JavaScript per analizzare ciascuno di questi oggetti DOM e trovare quelli che iniziano con la punteggiatura appendibile. Per quelli che iniziano con la punteggiatura qualificante, applicheremo una classe HTML con un valore negativo per indentatura del testo regola che appenderà la punteggiatura sul margine sinistro.
La parte difficile qui viene nel definire il valore del tuo indentatura del testo regola. Caratteri diversi richiedono valori diversi, quindi ciò richiederà alcuni ritocchi e personalizzazioni da parte dell'utente. Ad esempio, una virgoletta doppia intelligente (") ha una larghezza più spessa rispetto a una virgoletta singola intelligente ('). Quindi, se si sospende la punteggiatura, l'elemento DOM che inizia con una doppia citazione intelligente richiederà un valore maggiore per il indentatura del testo regola piuttosto che un elemento DOM che inizia con una virgoletta singola intelligente.
Una nota sui caratteri
Non solo il indentatura del testo il valore può variare a seconda della larghezza del segno di punteggiatura che stai appeso, ma dipende anche dal tipo di carattere che stai utilizzando. Ovviamente, questo è il Web e non è sempre possibile garantire che un utente utilizzi un determinato carattere tipografico. Tuttavia, i caratteri sicuri per il web hanno una buona ubiquità, mentre i font non sicuri per il Web hanno alcuni metodi piuttosto a prova di proiettile per servire tipi di carattere specifici ai client. In ogni caso, puoi arrivare abbastanza vicino per garantire che tutti stiano vedendo lo stesso font.
Qualunque sia il tipo di carattere o pila di caratteri che usi, è bene fare un'anteprima e modificare il tuo indentatura del testo valori su base per carattere (e preferibilmente in varie dimensioni). Ciò garantisce che i segni di punteggiatura sospesi si allineino correttamente.
Le classi di punteggiatura sospese
Supponendo che tutti gli elementi del nostro post utilizzino lo stesso carattere tipografico, possiamo configurare tre classi che definiscono tre larghezze: piccola, media e grande. A seconda del tipo di punteggiatura con cui inizia, il nostro JavaScript applicherà una di queste tre classi all'elemento DOM dandoci così la punteggiatura sospesa!
Notiamo che stiamo usando em misure. Questo assicura il indentatura del testo sarà sempre relativo al dimensione del font del testo nell'articolo. Quindi, se la dimensione del carattere è aumentata, non sarà necessario modificare il indentatura del testo valori.
Le classi di punteggiatura sospese: due caratteri tipografici
Ma cosa succede se si utilizzano due caratteri tipografici diversi nel layout? Nell'esempio che stiamo usando, i nostri elementi di testo del corpo (
) usa un carattere tipografico sans-serif (Helvetica Neue, Arial fallback) mentre le nostre intestazioni (
) usa un diverso tipo di carattere sans-serif (Source Sans Pro). I segni di punteggiatura di Source Sans Pro sono, in base alla progettazione, più ampi di quelli di Helvetica Neue e Arial. Pertanto, gli elementi DOM impostati in Source Sans Pro (intestazioni) richiederanno dimensioni leggermente maggiori indentatura del testo valori di elementi DOM impostati in Helvetica Neue (liste, paragrafi, ecc.).
Questo è abbastanza facile da gestire aggiungendo classi specifiche per le intestazioni. Utilizzeremo semplicemente JavaScript per rilevare il tipo di elemento, quindi applichiamo la classe appropriata.
Passaggio 4: impostazione di una funzione in JavaScript
Ora che abbiamo il markup e il CSS di cui abbiamo bisogno, utilizzeremo JavaScript per scoprire tutti gli elementi DOM che sono i diretti discendenti del nostro contenitore di articoli. Verifichiamo quindi se questi elementi DOM iniziano con segni di punteggiatura da appendere.
Per iniziare, creeremo una funzione che conterrà tutto il nostro codice. Questa funzione prenderà un argomento, che è l'elemento DOM contenente il testo che vogliamo analizzare per appendere la punteggiatura, ad esempio il contenitore di un post sul blog.
/ * * Punteggiatura sospesa * Questa funzione accetta un elemento DOM, * ricerca ciascuno dei suoi discendenti diretti, * e, se l'elemento inizia con punteggiatura appendibile, * la classe HTML appropriata viene applicata all'elemento. * * Quindi l'elemento padre DOM ottiene una classe per attivare * le classi figlio che abbiamo applicato. * / function hangPunctuation (container) // code goes here
Nota: la punteggiatura sospesa è un aspetto del miglioramento progressivo. In questo esempio, useremo JavaScript nativo che non è completamente supportato nei browser legacy (osservando te in IE). Se volessi far funzionare questo nei vecchi browser, potresti farlo. La maggior parte delle cose che faremo è selezionare elementi dal DOM e cambiare le loro classi. Puoi facilmente integrare jQuery per farlo, oppure puoi usare le funzioni di supporto da youmightnotneedjquery.com
Passaggio 5: definizione dei caratteri di punteggiatura
Dobbiamo creare un elenco di punteggiatura appendibile. Usando i caratteri che abbiamo definito in precedenza come riferimento, possiamo creare un oggetto in JavaScript che definisce i nostri segni di punteggiatura (per i loro punti Unicode):
// Segni di punteggiatura qualificati per essere appesi var marks = '\ u201c': 'medium', // "- ldquo - left smart double quote '\ u2018': 'small', // '- lsquo - left smart single quote '\ u0022': 'medio', // "- ldquo - left dumb double quote '\ u0027': 'small', // '- lsquo - left dumb single quote' \ u00AB ':' large ', // "- laquo - left double angle quote '\ u2039': 'medium', // <- lsaquo - left single angle quote '\ u201E': 'medium', //" - bdquo - left smart double low quote '\ u201A ':' small ', //' - sbquo - left smart single low quote;
Come puoi vedere, definiamo un elenco di segni di punteggiatura che vogliamo appendere con una corrispondente definizione di larghezza che corrisponda alle nostre classi HTML. Questo oggetto ci dice quali segni di punteggiatura devono essere appesi e quanto grande è il loro negativo indentatura del testo il valore dovrebbe essere Questa lista non è comprensibile. Il bello è che esamineremo l'intero elenco, quindi è possibile aggiungere ulteriori segni di punteggiatura a questo elenco, se necessario.
Passaggio 6: looping su ogni elemento figlio
Ora esamineremo tutti i discendenti diretti del nostro elemento contenitore (che è stato passato alla funzione). Per fare ciò, prima installeremo a per ciclo continuo:
// Loop su tutti i discendenti diretti del container // Se è un blockquote, loop sui suoi discendenti diretti per (i = 0; i
Successivo (all'interno del per loop) creeremo una variabile chiamata EL che rappresenta ciascun elemento discendente diretto del contenitore su cui stiamo eseguendo il ciclo (ottieni i discendenti di un elemento usando il .bambini proprietà):
var el = container.children [i];
Ora passeremo il nostro EL variabile ad un'altra funzione (hangIfEligible ()), che verificherà se inizia con un segno di punteggiatura che può essere appeso. Se lo fa, questa altra funzione applicherà la classe HTML appropriata all'elemento.
if (el.tagName === 'BLOCKQUOTE') per (var k = 0; k < el.children.length; k++) hangIfEligible(el.children[k]); ; else hangIfEligible(el);
Notate cosa abbiamo fatto con il blockquote etichetta? Perché blockquote gli elementi possono avere elementi discendenti che iniziano con la punteggiatura sospesa (come il tag), abbiamo bisogno di ricorrere a ciascuno dei suoi figli. Quindi se l'elemento corrente su cui stiamo eseguendo il ciclo è a blockquote etichetta, passiamo su ciascuno dei suoi figli e li passiamo al nostro hangIfEligible () funzione. Se non è un blockquote elemento, passiamo semplicemente l'elemento corrente stesso al hangIfEligible () funzione.
Se non lo facessimo in modo specifico sui bambini di blockquote elemento, ci mancherebbero i suoi figli e la possibilità di appendere la punteggiatura.
Nostro per il ciclo dovrebbe ora avere un aspetto simile a questo:
// Loop su tutti i discendenti diretti del container // Se è un blockquote, loop sui suoi discendenti diretti per (i = 0; i
Step 7: Appendere la punteggiatura
Abbiamo passato l'attuale elemento figlio al nostro hangIfEligible () funzione. Quindi ora definiamo cosa fa quella funzione:
// Controlla se l'elemento passato // inizia con uno dei tipi di punteggiatura qualificanti // Se lo fa, applica la classe appropriata in base alla funzione del tipo di tag hangIfEligible (el) // code goes here
Come puoi vedere, abbiamo una funzione chiamata hangIfEligible () che prende un parametro: l'elemento DOM che stiamo controllando per l'inizio della punteggiatura.
Ottenere il testo dell'elemento
Ora creiamo le variabili di cui abbiamo bisogno. Per prima cosa dobbiamo ottenere il testo all'interno dell'elemento DOM. Per farlo, useremo il innerText Proprietà JavaScript Perché questo non funziona in Firefox, utilizzeremo anche il textContent proprietà che fa.
var text = el.innerText || el.textContent;
Impostazione del nome della classe HTML
Poiché il nostro esempio utilizza due tipi di carattere diversi (uno per le intestazioni, uno per la copia) avremo bisogno di due classi diverse per i due diversi tipi di elementi.
Se ricordi, le nostre classi HTML che controllano il negativo indentatura del testo seguire lo schema di denominazione trattino- e quindi la larghezza del segno di punteggiatura (piccolo, medio o grande). Se l'elemento è un'intestazione, aggiungiamo intestazione- fra loro. Quindi la classe per i segni di punteggiatura di piccola larghezza è trattino-piccole per copia normale e trattino-header-small per le intestazioni.
Nel nostro JavaScript, creeremo una variabile per la nostra classe HTML e aggiungeremo intestazione- in seguito se il tag corrente è un elemento di intestazione.
var htmlClass = 'indent-';
Controllo dell'elemento per la punteggiatura iniziale
Ora controlliamo e vediamo se il testo del nostro attuale elemento DOM inizia con uno dei segni di punteggiatura che abbiamo definito in precedenza. Per fare ciò, eseguiremo un ciclo su ciascuna voce nel nostro votazione variabile dove abbiamo definito i segni di punteggiatura che vogliamo appendere. Quindi useremo JavaScript indice di proprietà per controllare e vedere se il primo carattere il testo dell'elemento corrisponde a uno dei nostri segni di punteggiatura.
per (var mark in marks) if (text.indexOf (mark) === 0) // Se corrisponde, code here
Un aggiornamento indice di: JavaScript indice di guarda una stringa in cui ogni carattere è un elemento in una matrice. Per esempio, var text = 'A String' sarebbe simile a questo ['Una stringa']. Il indice di proprietà prende un personaggio e cerca l'intero array alla ricerca di quel personaggio. Se lo trova, restituisce la posizione del personaggio nella matrice. Quindi, nel nostro caso, cerchiamo un determinato segno di punteggiatura. Se si trova nella primissima posizione dell'array (indice 0), il nostro testo inizia con la punteggiatura appendibile.
Aggiungere una classe
Ora tutto ciò che dobbiamo fare è aggiungere una classe all'elemento se il primo carattere del suo testo corrisponde a uno dei nostri segni di punteggiatura.
Nel nostro esempio, se l'elemento inizia con un segno di punteggiatura qualificante, dobbiamo quindi verificare se l'elemento corrente è un'intestazione (poiché le intestazioni necessitano di classi HTML modificate). Quindi, nella parte in cui avevamo // se corrisponde, codice qui metteremo questo:
Vedi cosa abbiamo fatto? Se l'elemento corrente era un titolo di qualche tipo, abbiamo aggiunto intestazione- al nome della classe HTML. La classe HTML che viene aggiunta al nostro elemento DOM è costruita in questo modo:
trattino- per impostazione predefinita
intestazione- aggiunto se l'elemento corrente è un'intestazione
piccolo, medio, o grande aggiunto in base alla larghezza definita del segno di punteggiatura corrente
Tutto il codice insieme
Tutto il codice insieme sarebbe simile a questo:
// Controlla se l'elemento passato // inizia con uno dei tipi di punteggiatura qualificanti // Se lo fa, applica la classe appropriata in base alla funzione del tipo di tag hangIfEligible (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; per (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 + contrassegna [mark]);
Passaggio 8: eseguire la funzione al caricamento della pagina
Ora tutto ciò che devi fare è eseguire la funzione quando la pagina viene caricata. Puoi farlo con poche righe di codice:
window.onload = function () var container = document.querySelector ('. post') hangPunctuation (container); container.classList.add ( 'hang-punteggiatura');
Vedi cosa abbiamo fatto qui? Chiama il hangPunctuation funzione e passa nell'elemento DOM contenente il corpo di testo all'interno del quale vuoi appendere la punteggiatura.
Si noti che aggiungiamo una classe all'elemento contenitore. Puoi usare questa classe per appendere
liste se vuoi Basta aggiungere un po 'di CSS in questo modo: .punteggiatura di blocco ul margine: 0; padding: 0: list-style-position: outside;
Il codice finale
Questo è tutto! Siamo tutti finiti. Ecco il codice finale:
/ * * Punteggiatura sospesa * Questa funzione accetta un elemento DOM, * ricerca ciascuno dei suoi discendenti diretti, * e, se l'elemento inizia con punteggiatura appendibile, * la classe HTML appropriata viene applicata all'elemento. * * Quindi l'elemento padre DOM ottiene una classe per attivare * le classi figlio che abbiamo applicato. * / function hangPunctuation (container) // Segni di punteggiatura che possono essere appesi var marks = '\ u201c': 'medium', // "- ldquo - left smart double quote '\ u2018': 'small', / / '- lsquo - left smart quote singole' \ u0022 ':' medium ', // "- ldquo - left dumb double quote' \ u0027 ':' small ', //' - lsquo - left dumb single quote '\ u00AB ':' large ', // "- laquo - left double angle quote' \ u2039 ':' medium ', // <- lsaquo - left single angle quote' \ u201E ':' medium ', //" - bdquo - left smart double low quote '\ u201A': 'small', // '- sbquo - left smart single low quote; // Loop su tutti i discendenti diretti del container // Se è un blockquote, loop sui suoi discendenti diretti per (i = 0; i
È bene ricordare che questa soluzione non è affatto completa. Molto probabilmente richiederà un aggiustamento per ogni progetto su cui è usato, perché ogni progetto differisce nelle scelte del carattere tipografico, nella struttura dei markup, ecc. Tuttavia, se si stende del testo longform, questa soluzione potrebbe aiutare ad aggiungere un po 'di raffinatezza tipografica al proprio layout.
Lettura supplementare:
Punteggiatura sospesa su trucchi CSS
Mark Boulton su Hanging Punteggiatura
Punteggiatura sospesa in CSS3 da The Recovering Physicist
Harry Roberts copre appesi punti elenco e blockquotes su Smashing Magazine
Un approccio alternativo
Dal momento della pubblicazione di questo articolo, altri sono entrati in sintonia con le loro idee. Dai un'occhiata ai commenti e troverai l'interpretazione ispirata di Gunnar Bittersmann sul CSS di cui abbiamo parlato. Lane Olson ha persino combinato questi pensieri con il mio JavaScript per realizzare una demo su Codepen.
Accentsconagua
Share
