Cele hanging-punctuationObiectivele de proprietate de la a da web designeri un control mai bun asupra zimți tipografie de pe web.
Ideea din spatele punctuației atârnate este de a pune câteva caractere de punctuație de la început (sau până la o extensie mai mică la sfârșit) ale elementelor de text „în afara” casetei pentru a păstra fluxul de citire.
Practic, ar muta ușor citatul, glonțul sau orice altceva spre stânga (sau dreapta în rtlmodul), astfel încât prima literă să fie aliniată corect cu restul documentului.
Vă rugăm să rețineți că această proprietate este opțională, astfel încât producătorii de browsere să o accepte sau nu.
Sintaxă
hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Niciun personaj nu se blochează. Aceasta este valoarea implicită pentru această proprietate.
first
Un caracter disponibil la începutul primei linii formatate a unui element se blochează.
last
Un caracter disponibil la sfârșitul ultimei linii formatate a unui element se blochează.
force-end
O oprire sau o virgulă la sfârșitul unei linii atârnă.
Punctuația este forțată să se blocheze și nu este luată în considerare la măsurarea liniei pentru justificare.
allow-end
O oprire sau o virgulă la sfârșitul unei linii se blochează dacă altfel nu se potrivește înainte de justificare.
Punctuația de la sfârșitul primei linii pentru nu se blochează, deoarece se potrivește fără să atârne. Cu toate acestea, pe a doua linie, nu există suficient spațiu, așa că atârnă.
Caracterele disponibile
| Cod | Caracter | Nume |
|---|---|---|
U+002C | , | VIRGULĂ |
U+002E | . | PUNCT |
U+060C | ، | COMA ARABĂ |
U+06D4 | ۔ | ARABIC FULL STOP |
U+3001 | 、 | COMMA IDEOGRAFICĂ |
U+3002 | 。 | OPRIRE COMPLETĂ IDEOGRAFICĂ |
U+FF0C | ， | COMMA LATERALITATE |
U+FF0E | ． | LARGĂ COMPLETĂ OPRIRE COMPLETĂ |
U+FE50 | ﹐ | MICĂ COMĂ |
U+FE51 | ﹑ | MICA COME IDEOGRAFICĂ |
U+FE52 | ﹒ | STOP COMPLET MIC |
U+FF61 | ｡ | JUMATATE LĂȚIME IDEOGRAFICĂ STOP COMPLET |
U+FF64 | ､ | COMMA IDEOGRAFICĂ JUMATATE |
Rețineți că agenților de utilizatori li se permite să adauge orice caracter la această listă. Citând specificațiile:
UA poate include alte caractere, după caz.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| Nu | Nu | Nu | Nu | 10 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| Nu | Nu | Nu | 10.0-10.2 |
O soluție decentă pentru browserul neacceptat ar fi utilizarea unei linii de text negative așa:
blockquote p ( text-indent: -0.5em; /* Change according to your font */ )Pentru listele de gloanțe, vă recomandăm să vă asigurați că poziția gloanțelor este setată outsideși că depășirea containerului nu este setată la hidden.