Вешање-интерпункција - ЦСС-трикови

Anonim

У hanging-punctuationЦиљеви својине на давање веб дизајнера финији зрнасту контролу над типографије на вебу.

Идеја која стоји иза вешања интерпункције је ставити неке интерпункцијске знакове од почетка (или до мањег краја на крају) елемената текста „изван“ оквира како би се очувао ток читања.

У основи, мало би померио тај цитат, метак или било шта друго улево (или удесно у rtlрежиму), тако да се прво слово правилно поравна са остатком документа.

Слика из овог чланка Стеве Хицкеи-а

Имајте на уму да ово својство није обавезно, тако да га произвођачи прегледача могу или не морају подржавати.

Синтакса

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

none

Ниједан лик не виси. Ово је подразумевана вредност за ово својство.

first

Виси расположиви знак на почетку прве форматиране линије елемента.

last

Виси расположиви знак на крају последњег форматираног ретка елемента.

force-end

Окачи се заустављач или зарез на крају реда.

Интерпункција је присиљена да виси и не узима се у обзир приликом мерења линије за оправдање.

allow-end

Стоп или зарез на крају реда виси ако се другачије не уклапа пре оправдања.

Интерпункција на крају првог реда за не виси, јер одговара без вешања. На другом реду, међутим, нема довољно простора, па зато виси.

Доступни знакови

Код Карактер Име
U+002C , ЦОММА
U+002E . ТАЧКА
U+060C ، АРАПСКА КОММА
U+06D4 ۔ АРАПСКИ ПУН СТОП
U+3001 ИДЕОГРАФСКА КОМА
U+3002 ИДЕОГРАФСКА ПУНА СТОПА
U+FF0C ФУЛЛВИДТХ ЦОММА
U+FF0E ФУЛЛВИДТХ ФУЛЛ СТОП
U+FE50 МАЛА КОМА
U+FE51 МАЛА ИДЕОГРАФСКА КОМА
U+FE52 МАЛА ПУНА СТОПА
U+FF61 ПОЛУШИРИНА ИДЕОГРАФСКА ПУНА СТОПА
U+FF64 ПОЛУШИРИНА ИДЕОГРАФСКА КОМА

Имајте на уму да су корисничким агентима дозвољено да додају било који знак на ову листу. Цитирање спецификације:

УА може према потреби садржавати и друге знакове.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
Не Не Не Не 10

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
Не Не Не 10.0-10.2

Пристојна надокнада за неподржани прегледач била би употреба негативног увлачења текста, као:

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

За листе метака, можда бисте желели да будете сигурни да је положај ознака постављен на outsideи да преливање контејнера није постављено на hidden.