La propiedad hanging-punctuation tiene como objetivo proporcionar a los diseñadores web un control más preciso sobre la tipografía en la web.
La idea detrás de colgar la puntuación es poner algunos caracteres de puntuación desde el principio (o en menor medida al final) de los elementos de texto «fuera» de la caja para preservar el flujo de lectura.
Básicamente, movería ligeramente esa cita, viñeta o lo que sea a la izquierda (o a la derecha en modo rtl) para que la primera letra esté correctamente alineada con el resto del documento.
Tenga en cuenta que esta propiedad es opcional, por lo que los fabricantes de navegadores pueden o no admitirla.Sintaxis
hanging-punctuation: none | || last ]blockquote p { hanging-punctuation: first;} none
Ningún personaje cuelga. Este es el valor predeterminado de esta propiedad.
first
Se cuelga un carácter disponible al comienzo de la primera línea formateada de un elemento.
last
Se cuelga un carácter disponible al final de la última línea formateada de un elemento.
force-end
Una parada o coma al final de una línea cuelga.
La puntuación está obligada a colgarse y no se tiene en cuenta al medir la línea para justificarla.
allow-end
Una parada o coma al final de una línea se cuelga si no encaja antes de la justificación.
La puntuación al final de la primera línea para no cuelga porque encaja sin colgar. En la segunda línea, sin embargo, no hay suficiente espacio para que cuelgue.
caracteres Disponibles
| Código | Personaje | Nombre |
|---|---|---|
U+002C |
, | COMA |
U+002E |
. | FULL STOP |
U+060C |
، | ÁRABE COMA |
U+06D4 |
۔ | ÁRABE QUE SE DETENGA POR COMPLETO |
U+3001 |
、 | IDEOGRÁFICOS COMA |
U+3002 |
。 | IDEOGRÁFICO QUE SE DETENGA POR COMPLETO |
U+FF0C |
， | FULLWIDTH COMA |
U+FF0E |
． | FULLWIDTH QUE SE DETENGA POR COMPLETO |
U+FE50 |
﹐ | PEQUEÑO COMA |
U+FE51 |
﹑ | PEQUEÑO IDEOGRÁFICO COMA |
U+FE52 |
﹒ | PEQUEÑA PARADA COMPLETA |
U+FF61 |
｡ | PUNTO IDEOGRÁFICO DE MEDIA ANCHURA |
U+FF64 |
､ | COMA IDEOGRÁFICA DE MEDIA ANCHURA |
Tenga en cuenta que los agentes de usuario pueden añadir cualquier carácter a esta lista. Citando la especificación:
El UA puede incluir otros caracteres, según corresponda.
Propiedades Relacionadas
text-indenttext-align
Otros Recursos
-
hanging-punctuationen la especificación -
hanging-punctuationcon CSS por Steve Hickey
Este navegador soporte de datos es de Caniuse, que cuenta con más detalle. Un número indica que el navegador admite la función en esa versión y en adelante.
Escritorio
| Chrome | Firefox | IE | Borde | Safari |
|---|---|---|---|---|
| No | No | No | No | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| No | No | No | 10.0-10.2 |
Una alternativa decente para un navegador no compatible sería usar una sangría de texto negativa como tal:
blockquote p { text-indent: -0.5em; /* Change according to your font */}Para las listas de viñetas, es posible que desee asegurarse de que la posición de las viñetas esté establecida en outside y que el desbordamiento del contenedor no esté establecido en hidden.