Karājas-pieturzīmes - CSS-triki

Anonim

Par hanging-punctuationīpašuma mērķis ir sniegt web dizaineriem smalkāku detalizēta vadība pār tipogrāfijas tīmeklī.

Starppunktu piekāršanas ideja ir ievietot dažas pieturzīmes no sākuma (vai mazākā mērā beigās) no teksta elementiem “ārpus” lodziņa, lai saglabātu lasīšanas plūsmu.

Būtībā tas nedaudz pārvietotu šo pēdiņu, aizzīmi vai visu citu pa kreisi (vai rtlrežīmā pa labi ), lai pirmais burts būtu pareizi izlīdzināts ar pārējo dokumentu.

Attēls no šī Stīva Hikija raksta

Lūdzu, ņemiet vērā, ka šis īpašums nav obligāts, tāpēc pārlūkprogrammu veidotāji to var vai nevar atbalstīt.

Sintakse

hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )

none

Neviens varonis nekarājas. Šī ir šī īpašuma noklusējuma vērtība.

first

Elementa pirmās formatētās rindas sākumā karājas pieejams rakstzīme.

last

Pieķeras pieejamā rakstzīme elementa pēdējās formatētās rindas beigās.

force-end

Karājas pietura vai komats rindas beigās.

Pieturzīmes ir spiestas pakārt, un tās netiek ņemtas vērā, mērot līniju pamatojuma dēļ.

allow-end

Stop vai komats rindas beigās karājas, ja tas pirms pamatojuma citādi neder.

Pieturzīmes pirmās rindas beigās priekš nav karājas, jo der bez pakāršanas. Otrajā rindā tomēr nav pietiekami daudz vietas, tāpēc tas karājas.

Pieejamās rakstzīmes

Kods Raksturs Nosaukums
U+002C , KOMATS
U+002E . PUNKTS
U+060C ، ARĀBU KOMMA
U+06D4 ۔ ARĀBIJAS PILNA APSTĀKĻA
U+3001 IDEOGRĀFISKĀ KOMMA
U+3002 IDEOGRĀFISKA PILNA APSTĀKĻA
U+FF0C PILNVARU KOMMA
U+FF0E PILNU PILNU PĀRTRAUKŠANA
U+FE50 MAZA KOMMA
U+FE51 MAZA IDEOGRĀFISKĀ KOMMA
U+FE52 MAZA PILNA APSTĀKĻA
U+FF61 PUSPILDES IDEOGRĀFISKĀ PILNA APSTĀKĻA
U+FF64 PUSVIDIDES IDEOGRĀFISKĀ KOMMA

Ņemiet vērā, ka lietotāju aģentiem ir atļauts pievienot šim sarakstam jebkuru rakstzīmi. Citējot specifikāciju:

UA pēc vajadzības var ietvert citas rakstzīmes.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
10

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
10.0-10.2

Pienācīgs neatbalstītas pārlūkprogrammas rezerves variants būtu negatīva teksta ievilkuma izmantošana:

blockquote p ( text-indent: -0.5em; /* Change according to your font */ )

Attiecībā uz aizzīmju sarakstiem ieteicams pārbaudīt, vai aizzīmju pozīcija ir iestatīta uz outsideun vai konteinera pārpilde nav iestatīta uz hidden.