hacer - ¿Es posible habilitar la auto-división de palabras en HTML/CSS?
html title attribute (4)
Mi cliente ha solicitado habilitar la auto-división de palabras en esta página: http://carlosdinizart.com/biography/ , y me di cuenta de que nunca lo había visto hecho en una página web.
¿Es posible configurar auto-división de palabras en un documento HTML con solo HTML / CSS? Si no, ¿cuáles son las opciones?
CSS3 proporciona algo de apoyo para esto. Fuente: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ Puede consultar la documentación de w3c aquí: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation
CSS3 agrega seis propiedades a la lista de cosas útiles. Estos son:
- El más importante es
hyphens. - Puede agregar archivos de diccionario con
hyphenate-resourcepara que el navegador tenga una mejor oportunidad de representar su texto con la separación de palabras correcta. -
hyphenate-beforeestablece un número mínimo de caracteres antes de la separación silábica. -
hyphenate-afterhace lo mismo quehyphenate-beforepero para los caracteres después de la separación silábica. -
hyphenate-linesdefine cuántas líneas se escribe una palabra con guiones al máximo. con carácter dehyphenate-characterpuede especificar qué entidad HTML se debe usar, por ejemplo,/2010.
La propiedad principal de esta pila es hyphens . Acepta uno de tres valores: none , manual o auto . El predeterminado es manual, donde puedes establecer guiones a través de ­ . auto es mejor para texto continuo, mientras que las palabras se dividen si es posible y está disponible. Y none no se pliega en absoluto, incluso si hay un juego de caracteres para un posible salto de línea en una palabra determinada.
Actualizar:
Información de soporte del navegador aquí: http://caniuse.com/css-hyphens
En este momento, mi CSS para <p> es
p {
font-style: normal;
padding: 0;
margin-top: 0;
margin-left: 0px ;
margin-right: .5em ;
margin-bottom: 0;
text-indent: 1em;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
word-break:break-word;
hyphens: auto;
}
Esto no funciona para Chrome 39 en Mac. Conocido por no trabajar en Opera. Funciona para Firefox, iOS Safari.
Esto NO es infalible: las columnas estrechas (menos de 6 palabras) son feas, pero en general hace que el diseño se parezca mucho más al tipo establecido correctamente.
Para tratar con una página que tiene un ancho fijo para el texto, el movimiento práctico sería agregar un par de caracteres SOFT HYPHEN (U + 00AD), usando la referencia de la entidad ­ si le resulta más cómodo que ingresar el carácter (invisible) en sí. Puede averiguar rápidamente qué palabras deben guionarse para producir un buen resultado.
En un caso más complejo (varias páginas, ancho flexible), use un preprocesador o código del lado del servidor o un código del lado del cliente que agregue guiones suaves. El enfoque del lado del cliente es el más simple y se puede aplicar independientemente de las tecnologías del servidor y de las herramientas de autoría. Tenga en cuenta que la separación silábica automática puede salir mal y necesita ayuda: los idiomas del texto deben indicarse en el marcado (o de lo contrario, dependiendo de la biblioteca utilizada).
Como mínimo, podría simplemente poner los atributos lang=en class=hyphenate en la etiqueta <body> y el siguiente código en la parte de la head :
<script
src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>
Demostración: http://bytelevelbooks.com/code/javascript/hyphenation.html (texto de ancho flexible, con el ancho máximo establecido, para que pueda probarlo variando el ancho de la ventana del navegador).
Una opción es insertar guiones suaves en el texto en lugares donde puede romperse. El guión suave está representado por la entidad ­ en HTML. Puede encontrar bibliotecas / herramientas que pueden preparar texto automáticamente con ­ s en los lugares correctos, de lo contrario deberás hacerlo manualmente.