Hanging Punctuation este un instrument tipografic puternic pentru crearea corpurilor optice aliniate. Din păcate, a fost uitat în mare măsură pe web ... până acum. Vom arunca o privire la valoarea atârnării de punctuație și cum o puteți implementa parțial utilizând o javascript și o regulă CSS care a fost în jur de ani.
Punctul de suspendare: Un grund
Când Gutenberg și-a creat Biblia în anii 1400, a dezvoltat un stil de trasare a semnelor de punctuație, care a suferit până în prezent, numit "punctuație suspendată" (cunoscută și sub denumirea de aliniere optică).
Ce este Punctajul suspendat?
Punctul de spargere este o metodă de setare a semnelor de punctuație in afara marginea unui corp de text. Acest lucru creează aspectul unei margini uniforme în text și permite un flux optic mai bun.
Consecințele de punctuație agățate vă percep modul în care textul este afișat pe o pagină.
În cazul în care se produce semnalul de suspendare
Hangatura de punctuație are loc în marginile din afara alinierii restului textului. Puteți să fixați semnele de punctuație în textul aliniat la stânga, aliniat la dreapta sau justificat.
De ce punem punctajul
Teoria din spatele motivului pentru care e atârnă punctuația este ceva important:
Punctele de punctuație din text cuprind doar o cantitate mică de înălțime a capacului. În mod obișnuit, aceasta nu este o problemă, dar când semnul de punctuație este primul caracter de pe muchia dreaptă a unui corp de text, acesta lasă o cantitate anormală de spațiere verticală care poate întrerupe fluxul vizual al unui corp de text.
Hangoutul de punctuație remediază această întrerupere. Firește, unele semne vor cădea pe marginea textului. Mai degrabă decât lăsându-le acolo și perturând fluxul optic al corpului de text, tipograful atenuează perturbarea prin atârnarea semnelor de punctuație în margini.
Ce semne de punctuație pot fi aliniate optic?
Pe măsură ce semnele de punctuație atârnă atenuarea perturbațiilor de la marcajele de înălțime ale capului, rezultă că în general trebuie să atârnați semnele de înălțime a capului mic, cum ar fi ghilimele ("" ") și cratimă (- -). punctul de exclamare (!) și semnul întrebării (?).
Punctuația suspendată: în imprimantă și pe Web
Suportul pentru spargerea punctuației în programele de publicare desktop, cum ar fi Adobe InDesign, a avut un drum lung. InDesign oferă instrumente excelente pentru atârnarea punctuării în corpurile de text. Bineînțeles, acest lucru este minunat pentru cei care proiectează software-ul desktop publishing, dar ce este vorba de designerii web?
Problema cu obținerea punctuației suspendate pe web este că totul este construit cu casete. Regulile de stil din CSS utilizează "modelul cutiei" care înfășoară toate elementele HTML în cutiile care conțin. Aceste cutii constau din margini, margini, padding și conținut.
În mod prestabilit, toate caracterele text de pe web se află într-o cutie. Hangoutul punctuație, prin contrast, necesită ca caracterele să fie in afara cutia. Aceasta a fost o problemă dificilă de rezolvat cu software-ul, astfel încât implementarea trucului tipografic de punctuație suspendată a fost în mare parte ignorată pe web, de către designeri și producători de browsere deopotrivă. După cum afirmă Mark Boulton, este o mare rușine faptul că un astfel de aspect important al tipăririi a fost tocmai curățat de covor.
Punctul de suspendare și Spec
S-ar putea să vă surprindă, dar spargerea punctuării este de fapt în modulul de text CSS3. Proprietatea de punctuație agățată, cu toate acestea, este marcată opțional, ceea ce contribuie la faptul că nimeni nu a implementat-o încă. De fapt, dacă nu este implementată, proprietatea este "în pericol și poate fi tăiată din spec. În timpul perioadei CR dacă nu există implementări corecte".
Deoarece niciun browser nu a implementat încă această proprietate, nu vom trece în detaliile de implementare pentru agățat-punctuație proprietate. Cu toate acestea, dacă sunteți curioși, puteți citi mai multe informații despre CSS Tricks sau despre coachingul lui Chris Coyer despre CSS Tricks.
Puncte de punctuație pentru agățare
Există o singură bucată de informații valoroase pe care le putem extrage din spec. Acesta detaliază care semne de punctuație ar trebui să fie atârnate:
U + 002C
,
VIRGULĂ
U + 002E
.
PUNCT
U + 060C
.
ARABIC COMMA
U + 06D4
.
STOP ARABIC FULL
U + 3001
.
IDEOGRAFIC COMMA
U + 3002
.
IDEOGRAFIC STOP FULL
U + FF0C
.
FULLWIDTH COMMA
U + FF0E
.
STOP FULLWIDTH FULL
U + FE50
.
SMALL COMMA
U + FE51
﹑
SMALL IDEOGRAPHIC COMMA
U + FE52
.
ÎNCĂLZIRE MICĂ
U + FF61
.
HALFWIDTH IDEOGRAFIC FULL STOP
U + FF64
.
HALFWIDTH IDEOGRAPHIC COMMA
Spec-ul afirmă că alte caractere pot fi atârnate dacă este cazul, ceea ce este bun, deoarece această listă nu este completă. De exemplu, spec. Nu menționează liniuțe, pe care tipografia tradițională o denumește drept semne de punctuație demne de agățat.
După cum se recomandă la fizicianul recuperator, limbile occidentale tradiționale vor putea să atârne doar următoarele semne de punctuație:
Cod Punct
Caracter
Nume
Entitatea HTML
Categoria Unicode
U + 00AB
"
PAGINA DE CALITATE DVS.
«
Pi
U + 00BB
"
DREAPTA PUNCTELOR DE MĂSURARE CU UNGHI
»
Pf
U + 2018
'
DREAPTA MARCĂ UNICĂ COTAȚIE
’
Pi
U + 2018
'
MÂNCĂ SINGURĂ MARCĂ DE COTĂRI
‘
Pf
U + 201C
„
TRANSPORTUL DOUBLE COTATE
“
Pi
U + 201D
“
DREAPTA MARCĂ DE CALITATE DUBLĂ
”
Pf
U + 2039
<
UN MĂRIME DE CĂUTARE A UNGHIULUI DE STÂNGA ÎN STÂNGA ÎN STÂNGA
‹
Pi
U + 203A
>
UN MĂRIME DE CĂIȚARE A UNGĂLOR DE DREAPTA
›
Pf
U + 2010
-
CRATIMĂ
& # X2010;
PD
U + 2013
-
RO DASH
-
PD
U + 2014
-
EM DASH
-
PD
Pentru limbile occidentale, semnele de punctuație, cum ar fi liniuțe, perioade, virgule, colonii, punct și virgulă etc., sunt în general atârnate la marginea dreaptă, deoarece în mod normal nu încep paragrafe sau apar pe marginea din stânga.
Aducerea Punctajului suspendat pe Web Acum
În mod ideal, ați suspenda toate punctuația calificată într-un paragraf de text, dar acesta este webul și suportul CSS incomplet face dificilă implementarea integrală a punctuației în textele stânga și dreapta, precum și textele justificate.
Punctul de spargere într-o singură marjă, de exemplu marginea stângă pentru textul aliniat la stânga, poate fi mai ușor de controlat. Blochează elemente de nivel cum ar fi , , prin etichetele care încep cu marcajele de punctuație calificate pot folosi un rezultat negativ text-liniuță pentru a fixa semnele de punctuație.
Merită remarcat faptul că spargerea punctuație folosind un negativ text-liniuță va permite doar să închideți punctuația chiar la începutul unui paragraf. Deoarece textul re-curge pe web în funcție de dimensiunea ecranului, nu știți niciodată unde vor cădea semne de punctuație. Semnul de punctuație început este singurul a cărui poziție puteți fi sigură.
În ciuda acestor provocări scurte, explorarea posibilităților de spânzurare a punctului de început poate fi în continuare valoroasă. Este o alegere tipografică pe care o poți face ca designer.
În acest tutorial ne vom uita la modul în care să atârna punctuația de început în textele tradiționale orientate spre stânga tradiționale din stânga. Amintiți-vă că codul este maleabil. Puteți lua exemplele din acest tutorial și le puteți personaliza pentru a se potrivi oricarei nevoi pe care o aveți. Sperăm că, în viitor, browserele vor rezolva mai bine problema lipirii semnelor de punctuație.
Pasul 1: O prezentare rapidă
Ideea din spatele implementării punctuării suspendate pentru textul aliniat la stânga este destul de simplă. Utilizați JavaScript pentru a găsi toate elementele DOM eligibile în contextul unui aspect al articolului care începe cu punctuație detașabilă. Când se găsește, aplicați o clasă HTML elementului care are o valoare negativă pentru text-liniuță regulă.
Pasul 2: Examinarea marcajului
Să aruncăm o privire la un exemplu de bază de marcare utilizat pentru a structura o postare de blog simplu. Textul articolului va fi prezentat în titluri, subpoziții, liste și citate, toate ca elemente frățești, după cum urmează:
Titlul articolului
Un text aici ...
"Un paragraf" care începe cu punctuație suspendabilă ...
O subpoziție pentru articol
Text aici ...
Textul citat ...
În mai multe paragrafe ...
Mai mult text ...
"Un subtitlu" începând cu punctuația
Mai mult text ...
Afișați textul ...
Un al doilea element de listă
Mai mult text ...
Ultimul paragraf.
Modelul dvs. de markup propriu poate fi diferit de acesta, caz în care puteți modifica mai târziu javascript-ul pentru a găsi elemente DOM în funcție de modul în care este stabilit marcajul. Pentru acest tutorial, vom folosi acest model de marcare simplu.
Pentru a închide punctul de punctuație pentru elementele dintr-un bloc de text, trebuie să delimitați mai întâi ce semne de punctuație pot fi atinse, pe care am analizat-o mai devreme în tutorial. Este important să rețineți că diferite limbi utilizează citate (și semne de punctuație) în moduri foarte diferite. De exemplu, aruncați o privire asupra modului în care engleza și galeza utilizează ghilimele primare și secundare:
Engleză: I-am spus lui Johnny, "Mark Twain a spus odată:" Dacă spui adevărul, nu trebuie să-ți amintești nimic "."
velșă: I-am spus lui Johnny, "Mark Twain a spus odată:" Dacă spui adevărul, nu trebuie să-ți amintești nimic.
Observați cum sunt opuși complet? Aceste diferențe sunt doar începutul. Consultați acest exemplu de utilizare a citațiilor primare și secundare în doar câteva limbi (puteți vedea o compilație mai mare la Wikipedia):
Limba
Primar
Secundar
Engleză
"..."
"..."
velșă
"..."
"..."
croat
"..."
"..."
limba germana
"..."
"..."
greacă
"..."
"..."
limba franceza
"..."
<...>
Este bine să fiți atenți la aceste diferențe, deci dacă vreți să lucrați vreodată cu alte limbi decât cu limba engleză occidentală, veți avea o înțelegere mai fermă cu privire la care semne de punctuație ar trebui să fie agățate.
Pasul 3: Configurarea CSS
Acum avem un marcaj de bază pentru aspectul textului nostru. Vom folosi JavaScript pentru a analiza fiecare dintre aceste obiecte DOM și pentru a găsi cele care încep cu punctuație hangout. Pentru cei care încep cu punctuație de calificare, vom aplica o clasă HTML cu o valoare negativă pentru text-liniuță care va închide punctuația în marginea din stânga.
Partea dificilă vine aici în definirea valorii tale text-liniuță regulă. Diferitele fonturi vor necesita valori diferite, deci va fi nevoie de unele modificări și personalizări din partea dvs. De exemplu, o cotă dublă inteligentă (") are o lățime mai groasă decât o cotație inteligentă unică ('). Prin urmare, dacă atârnă punctuația, elementul DOM care începe cu o cotare inteligentă dublă va necesita o valoare mai mare pentru text-liniuță decât un element DOM care începe cu o citare unică inteligentă.
O notă privind fonturile
Nu numai că va text-liniuță valoarea diferă în funcție de lățimea semnei de punctuație pe care o atârnați, dar va depinde, de asemenea, de tipul de text pe care îl utilizați. Desigur, acesta este webul și nu puteți asigura întotdeauna că un utilizator va folosi o anumită notă. Cu toate acestea, fonturile în condiții de siguranță web au o bună omniprezență, în timp ce fonturile non-web au niște metode destul de clare de a servi clienților anumite fonturi. Oricum, puteți ajunge destul de aproape pentru a vă asigura că toată lumea vede același font.
Indiferent de fontul sau stiva de fonturi pe care o folosiți, este bine să vă previzualizați și să vă optimizați text-liniuță valori pe bază de font (și, de preferință, la diferite dimensiuni). Acest lucru asigură faptul că semnele de punctuație suspendate se vor alinia corect.
Clasele de Punctuație suspendate
Presupunând că toate elementele postării noastre utilizează aceeași tip de text, putem configura trei clase care definesc trei lățimi: mici, medii și mari. În funcție de tipul de punctuație cu care începe, JavaScript-ul nostru va aplica una dintre aceste trei clase elementului DOM, dând astfel punctaj!
Observați că folosim em Măsurători. Aceasta asigură text-liniuță va fi întotdeauna relativ la marimea fontului din textul din articol. Deci, dacă dimensiunea fontului este mărită, nu va trebui să schimbați text-liniuță valorile.
Clasele de Punctuare Suspendate: Două tipuri de text
Dar dacă utilizați două tipuri de fonturi diferite în aspectul dvs.? În exemplul pe care îl folosim, elementele noastre de text (
) utilizează o tipă de tip sans serif (Helvetica Neue, Arial fallback) în timp ce anteturile noastre (
) utilizează o altă tipare de tip sans-serif (Source Sans Pro). Semnele de punctuație ale Source Sans Pro sunt, prin design, mai largi decât cele ale Helvetica Neue și Arial. Astfel, elementele DOM stabilite în Source Sans Pro (anteturile) vor necesita ceva mai mare text-liniuță valori decât elementele DOM stabilite în Helvetica Neue (liste, paragrafe etc.).
Acest lucru este destul de ușor să se ocupe prin adăugarea de clase suplimentare pentru anteturi. Vom folosi doar JavaScript pentru a detecta tipul de element, apoi aplicați clasa corespunzătoare.
Acum, că avem marcajele și CSS de care avem nevoie, vom folosi JavaScript pentru a descoperi orice elemente DOM care sunt descendenți direcți ai containerului nostru de articole. Apoi, verificăm dacă aceste elemente DOM încep cu semne de punctuație care ar trebui să fie atârnate.
Pentru a începe, vom crea o funcție care va conține întregul cod. Această funcție va avea un argument, care este elementul DOM care conține textul pe care dorim să îl analizăm pentru atârnarea punctuării, de exemplu containerul unei postări de blog.
/ * * Punctuation Hanging * Această funcție are nevoie de un element DOM, * caută fiecare descendent direct, * și, dacă elementul începe cu punctuație hangout, * se aplică clasa HTML adecvată elementului. * * Atunci elementul parent parent obține o clasă pentru a activa * clasele copilului pe care le-am aplicat. * / function hangPunctuation (container) // code goes here
Notă: spargerea punctuație este un aspect al îmbunătățirii progresive. În acest exemplu, vom folosi JavaScript nativ care nu este pe deplin suportat în browserele vechi (vă uităm la IE). Dacă doriți să obțineți acest lucru pentru a lucra în browsere mai vechi, puteți face acest lucru. Cele mai multe lucruri pe care le vom face sunt selectarea elementelor din DOM și schimbarea clasei lor. Ai putea încorpora cu ușurință jQuery pentru a face asta, sau ai putea folosi funcțiile de ajutor de la youmightnotneedjquery.com
Pasul 5: Definirea caracterelor de punctuație
Trebuie să creați o listă de punctuație suspendată. Folosind caracterele pe care le-am definit mai devreme ca referință, putem crea un obiect în JavaScript definind semnele de punctuație (prin punctele lor Unicode):
// Semnele de punctuație care se califică pentru a fi atârnate var marks = '\ u201c': 'medium', // "- ldquo - quit duble inteligente stânga" \ u2018 ':' small ', //' - lsquo - quote '\ u0022': 'medium', // "- ldquo - quote dublă stânga dublă '\ u0027': 'small', // '- lsquo - quote unică mutantă stânga' \ u00AB ':' large ', // "- laquo - stânga cota unghiulară" \ u2039 ": 'medium', // <- lsaquo - cotă unghiulară stânga '\ u201E': 'medium', //" - bdquo - ':' small ', //' - sbquo - citat inteligent la stânga inteligentă;
După cum puteți vedea, definim o listă de semne de punctuație pe care dorim să le închidem cu o definiție a lățimii corespunzătoare care se potrivește cu clasele noastre HTML. Acest obiect ne spune ce semne de punctuație să stea și cât de mari sunt negative text-liniuță valoare ar trebui să fie. Această listă nu este completă. Frumusețea este că vom buclei pe întreaga listă, astfel încât să puteți adăuga semne de punctuație suplimentare pe această listă, după cum este necesar.
Pasul 6: Reajustarea peste fiecare element de copil
Acum, vom trece peste toți descendenții direcți ai elementului nostru care conținea (care a fost trecut în funcție). Pentru a face acest lucru, vom seta mai întâi a pentru buclă:
// Buclele peste toți descendenții direcți ai containerului // Dacă este o blocare a unui bloc, o buclă peste descendenții săi direcți pentru (i = 0; i
Înainte (în interiorul pentru buclă) vom crea o variabilă numită el care reprezintă fiecare element descendent direct al containerului pe care îl înșelăm (obțineți descendenții unui element folosind .copii proprietate):
var el = container.children [i];
Acum o să trecem pe noi el variabilă la o altă funcție (hangIfEligible ()), care va verifica dacă începe cu un punct de punctuație care poate fi atasat. În caz contrar, această altă funcție va aplica clasei corespunzătoare HTML elementului.
dacă (el.tagName === 'BLOCKQUOTE') pentru (var k = 0; k < el.children.length; k++) hangIfEligible(el.children[k]); ; else hangIfEligible(el);
Observați ce am făcut cu blockquote etichetă? pentru că blockquote elementele pot avea elemente descendente începând cu semne de punctuație (cum ar fi eticheta), trebuie să ne batem și pe fiecare dintre copiii săi. Deci, dacă elementul curent pe care îl bifăm este a blockquote etichetă, ne batem peste fiecare dintre copiii săi și le transmitem către noi hangIfEligible () funcţie. Dacă nu este a blockquote element, doar trecem elementul curent în sine hangIfEligible () funcţie.
Dacă nu l-am lăsat în mod special asupra copiilor din blockquote element, ne-ar fi dor de copiii săi și de o șansă de a pune punctuație.
Al nostru pentru buclă ar trebui să caute în acest fel:
// Buclele peste toți descendenții direcți ai containerului // Dacă este o blocare a unui bloc, o buclă peste descendenții săi direcți pentru (i = 0; i
Pasul 7: Suspendarea punctului
Am trecut elementul curent copilului nostru hangIfEligible () funcţie. Deci, să definim acum ce face această funcție:
// Verificați dacă elementul passed // începe cu unul dintre tipurile de punctuație calificat // Dacă se întâmplă, aplicați clasa adecvată în funcție de tipul de etichetă funcție hangIfEligible (el) // code goes here
După cum puteți vedea, avem o funcție numită hangIfEligible () care ia un parametru: elementul DOM pe care îl verificăm pentru a începe punctele de punctuație.
Obținerea textului Elementului
Acum, să creăm variabilele de care avem nevoie. Mai intai trebuie sa obtinem textul in interiorul elementului DOM. Pentru a face acest lucru, vom folosi innerText Proprietatea JavaScript. Deoarece acest lucru nu funcționează în Firefox, vom folosi și textContent ceea ce face.
var text = el.innerText || el.textContent;
Configurarea numelui de clasă HTML
Deoarece exemplul nostru utilizează două fonturi diferite (unul pentru titluri, unul pentru copiere), vom avea nevoie de două clase diferite pentru cele două tipuri diferite de elemente.
Dacă vă amintiți, clasele noastre HTML care controlează negativul text-liniuță urmați modelul de denumire liniuță- și apoi lărgimea semnei de punctuație (mică, medie sau mare). Dacă elementul este un antet, adăugăm antet- între ele. Deci, clasa pentru mărcile de punctuație de mărime mică este liniuță-mici pentru copia și liniuță-header-mici pentru titluri.
În JavaScript, vom crea o variabilă pentru clasa noastră HTML și vom adăuga antet- mai târziu dacă eticheta curentă este un element de titlu.
var htmlClass = 'indent-';
Verificarea elementului pentru începutul punctului
Acum, să verificăm și să vedem dacă textul elementului nostru curent DOM începe cu una dintre semnele de punctuație pe care le-am definit mai devreme. Pentru a face acest lucru, vom trece peste fiecare dintre intrările din site-ul nostru mărci unde am definit semnele de punctuație pe care vrem să le închidem. Apoi vom folosi JavaScript Index de pentru a verifica și a vedea dacă primul caracter al textului elementului se potrivește cu unul dintre semnele noastre de punctuație.
pentru (var var în mărci) if (text.indexOf (mark) === 0) // Dacă se potrivește, cod aici
O reîmprospătare Index de: JavaScript Index de se uită la un șir în care fiecare caracter este un element dintr-un matrice. De exemplu, var text = 'Un șir' ar arăta așa ['O sfoară']. Index de proprietatea ia un caracter și caută întreaga matrice în căutarea acelui personaj. Dacă află acest lucru, returnează poziția caracterului în matrice. Deci, în cazul nostru, căutăm un anumit punct de punctuație. Dacă se găsește în prima poziție a matricei (indexul 0) atunci textul nostru începe cu punctuație suspendabilă.
Adăugarea unei clase
Acum, tot ce trebuie să facem este să adăugăm o clasă elementului dacă primul caracter al textului său se potrivește cu unul dintre semnele de punctuație.
În exemplul nostru, dacă elementul începe cu un punct de punctuație calificat, atunci trebuie să verificăm dacă elementul curent este un antet (deoarece anteturile noastre au nevoie de clase modificate HTML). Deci, în partea în care am avut // dacă se potrivește, codificați aici vom pune acest lucru:
Vezi ce am făcut? În cazul în care elementul curent a fost un titlu de un fel, am anexat antet- la numele clasei HTML. Clasa HTML care se adaugă elementului nostru DOM este construită astfel:
liniuță- în mod implicit
antet- dacă elementul curent este un antet
mic, mediu, sau mare adăugată în funcție de lățimea definită a punctului de punctuație curent
Tot Codul Împreună
Tot acest cod împreună ar arăta astfel:
// Verificați dacă elementul passed // începe cu unul dintre tipurile de punctuație care se califică // Dacă este cazul, aplicați clasa corespunzătoare în funcție de funcția tip tag Tag-uri HangIfEligible (el) var text = el.innerText || el.textContent; var htmlClass = 'indent-'; pentru (var var în semne) 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 + mărci [marca]);
Pasul 8: Rulați funcția la încărcarea paginii
Acum trebuie doar să executați funcția când pagina se încarcă. Puteți face acest lucru cu câteva rânduri de cod:
window.onload = funcție () var container = document.querySelector ('. post') hangPunctuație (container); container.classList.add ( 'hang-punctuație');
Vezi ce am făcut aici? Suna hangPunctuation funcția și treceți în elementul DOM care conține textul în care doriți să blocați punctuația.
Observați că adăugăm o clasă elementului container. Puteți folosi această clasă pentru a închide
listele dacă doriți. Pur și simplu adăugați unele CSS cum ar fi: .hang-punctuație ul margine: 0; padding: 0: list-style-position: exterior;
Codul Final
Asta e! Suntem cu toții terminați. Iată codul final:
/ * * Punctuation Hanging * Această funcție are nevoie de un element DOM, * caută fiecare descendent direct, * și, dacă elementul începe cu punctuație hangout, * se aplică clasa HTML adecvată elementului. * * Atunci elementul parent parent obține o clasă pentru a activa * clasele copilului pe care le-am aplicat. * / function hangPunctuation (container) // Semne de punctuație care se califică pentru a fi atârnate var marks = '\ u201c': 'medium', // "- ldquo - / '- lsquo - quote unică inteligentă din stânga' \ u0022 ':' medium ', // "- ldquo - quote dublă stânga dublă' \ u0027 ':' small ', //' - lsquo - ':' mare ', //' - cot laquo - stânga unghi dublu '\ u2039': 'medium', // <- lsaquo - stânga inteligent dublu cotație scăzută '\ u201A': 'mic', // '- sbquo - cot la cot inteligent unic scăzut; // Buclele peste toți descendenții direcți ai containerului // Dacă este o blocare a unui bloc, o buclă peste descendenții săi direcți pentru (i = 0; i
Este bine să ne amintim că această soluție nu este în nici un fel cuprinzătoare. Cel mai probabil, va fi nevoie de optimizarea pentru fiecare proiect pe care îl utilizați, deoarece fiecare proiect diferă în ceea ce privește alegerile de tip, structura de marcare etc. Cu toate acestea, dacă stabiliți text cu lungime, această soluție ar putea ajuta să adăugați un pic de rafinare tipografică aspectului.
Citirea suplimentară:
Punctul de suspendare pe trupele CSS
Mark Boulton pe Punctuația suspendată
Punctul de suspendare în CSS3 de către fizicianul recuperator
Harry Roberts acoperă puncte de glonț agățat și blockquotes pe Smashing Magazine
O abordare alternativă
De la publicarea acestui articol, alții s-au alăturat și cu ideile lor. Aruncați o privire la comentarii și veți găsi inspirația lui Gunnar Bittersmann pe CSS pe care l-am discutat. Lane Olson chiar a combinat aceste gânduri cu JavaScript-ul meu pentru a face un demo pe Codepen.
Accentsconagua
Share
