La hanging-punctuationpropiedad tiene como objetivo brindar a los diseñadores web un control más detallado sobre la tipografía en la web.
La idea detrás de la puntuación colgante es colocar algunos caracteres de puntuación desde el principio (o en menor medida al final) de los elementos de texto "fuera" del cuadro para preservar el flujo de lectura.
Básicamente, movería ligeramente esa cita, viñeta o lo que sea hacia la izquierda (o hacia la derecha en el rtlmodo) 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 | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )none
Ningún personaje se cuelga. Este es el valor predeterminado para 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
Se cuelga una parada o una coma al final de una línea.
La puntuación se ve obligada a colgar y no se considera al medir la línea para justificarla.
allow-end
Una parada o una 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, por lo que se cuelga.
Personajes disponibles
| Código | Personaje | Nombre |
|---|---|---|
U+002C | , | COMA |
U+002E | . | PARADA COMPLETA |
U+060C | ، | COMA ÁRABE |
U+06D4 | ۔ | PARADA COMPLETA ÁRABE |
U+3001 | 、 | COMA IDEOGRÁFICA |
U+3002 | 。 | PARADA TOTAL IDEOGRÁFICA |
U+FF0C | ， | COMA DE ANCHO COMPLETO |
U+FF0E | ． | ANCHO COMPLETO PARADA COMPLETA |
U+FE50 | ﹐ | COMA PEQUEÑA |
U+FE51 | ﹑ | PEQUEÑA COMA IDEOGRÁFICA |
U+FE52 | ﹒ | PARADA COMPLETA PEQUEÑA |
U+FF61 | ｡ | PARADA COMPLETA IDEOGRÁFICA DE MEDIO ANCHO |
U+FF64 | ､ | COMA IDEOGRÁFICA DE MEDIO ANCHO |
Tenga en cuenta que los agentes de usuario pueden agregar cualquier personaje a esta lista. Citando la especificación:
El UA puede incluir otros caracteres según corresponda.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| No | No | No | No | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 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é configurada en outsidey que el desbordamiento del contenedor no esté configurado en hidden.