ceslavaUn profe que hace webs

9 formas de separar por sílabas textos web

A la maquetación web le quedan muchas lagunas que los estándares y navegadores irán implementando. Mientras tanto os voy a mostrar 9 soluciones de yellowgreen si queréis que el texto de vuestro sitio sea separado por sí­labas.

Es útil sobre todo en textos justificados para evitar los incómodos rí­os que dificultan la lectura. Siempre lo podemos hacer manualmente pero además del pesado trabajo y de que el texto no será indexado correctamente no es una opción a considerar si tienes un sitio con contenido dinámico y constantemente actualizado.

9 soluciones

Las soluciones pasan por un generador online, Ruby, Java De todas ellas hago especial hincapié en la opción javascript (Hy­phen­ator) en la que detallo su uso, un par de plugins interesantes, uno para la librerí­a MoreCSS (AJAX) y otro para WordPress, y un bookmarklet para hacer la separación en nuestros propios navegadores. 

Básicamente cualquier método es válido para poder separar por sí­labas los textos, añadiendo al (X)HTML del texto el carácter ­ Son métodos user-friendly que no repercutirán en la correcta indexación de su sitio.

Utilizan patterns disponibles en varios idiomas y el algoritmo de Frank M. Liangs de LaTeX y Openoffice.

La mayorí­a soportan estos idiomas: alemán, inglés, español, francés, holandés y sueco.

1.- Generador online sin scripts

Pues eso, introduces el texto, lo configuras y te lo separa por sí­labas.

HTML Soft Hyphenation Generator

ceslava005

2.- PHP

ph­pHy­phen­ator la versión PHP de Hy­phen­ator (javascript)

3.- Javascript

Hy­phen­ator desarrollado por Math­i­as Nater.

Esta opción dinámica del lado del cliente puedes configurarla a través de una clase CSS.

Instrucciones:

  1. Codifica en UTF-8
  2. Especifica el idioma
  3. Incluye el javascript, que puedes descargar aquí­
  4. Opcionalmente puedes configurar varias opciones:

    Hyphenator.setMinWordLength(4); // La longituda mí­nima de las palabras para que sean separadas, por defecto 6
    Hyphenator.setHyphenChar(‘|’); // Cambiar el carácter de separación, por defecto ­
    Hyphenator.setUrlHyphenChar(‘|’); // Cambiar el carácter de separación para URL y direcciones de correo
    Hyphenator.setClassName(‘classname’); // Cambiar la clase donde se ejecutará la separación, por defecto hyphenate
    Hyphenator.setDisplayToggleBox(true or false); // Añade un botón para activar/desactivar la separación
    Hyphenator.setRemoteLoading(true or false); // Para desactivar la carga de los patterns, tenrán que cargarse manualmente
    Hyphenator.addExceptions(‘justtell-mewhy,ceslava’); // Añadimos excepciones, el algoritmo separará justtellmewhy de la forma indicada y NO separará ceslava

  5. Invócalo 

Hyphenator.run();

Ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="Hyphenator.js" type="text/javascript"></script>
        <script type="text/javascript">
                Hyphenator.setMinWordLength(4);
                Hyphenator.setDisplayToggleBox(true);
                Hyphenator.run();
        </script>

Cómo especificar qué separar:

  1. Aplica al texto que quieres que sea separado la clase (esta es la clase por defecto «hyphenate« pero puedes cambiarla)
  2. La clase se aplicará a todos los childs, si quieres pararlo puedes añadir «donthyphenate»
  3. Puedes añadir el atributo lang para especificar el idioma y así­ usar distintos al especificado. 
<p class="hyphenate" lang="en">

4.- AJAX

MoreC­SS Plug­in es la versión AJAX de ph­pHy­phen­ator.

Es un plugin para la librerí­a MoreCSS que también ha desarrollado yellowgreen y que merecerí­a un artí­culo aparte. Esta librerí­a está pensada para que desarrollar en un lenguaje muy similar a CSS, con una sintaxis muy parecida:

moreCSS

5.- Ruby | tex-hy­phen

Sólo inglés.

6.- Java | iText

Genera documentos en PDF, HTML y RTF.

7.- Python | Py­Hy­phen

Sólo alemán, inglés y húngaro.

8.- Bookmarklet

Si visitas un sitio que no tiene separación de sí­labas siempre puedes utilizar este código como Bookmarklet.

Copia y pega en la barra de direcciones de tu navegador el siguiente código, si no se ha configurado podrás añadirlo tú mismo:

javascript:if(document.createElement){
void(head=document.getElementsByTagName('head').item(0));
void(script=document.createElement('script'));
void(script.src='http://hyphenator.googlecode.com/svn/trunk/Hyphenator.js?bm=true');
void(script.type='text/javascript');
void(head.appendChild(script));}

Un ejemplo de este sitio con Firefox 3.0.5, al tener un diseño elástico puedes probar a cambiar el ancho de la ventana:

ceslava006

9.- Plugin para WordPress

Si tu sitio lo gestiona WP y no quieres hacerlo manualmente puedes instalar el plugin Hyphenator de Benedict B.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. Muy buena info.

    A veces es necesario cuando ponemos imagenes al lado de un texto, ya que la justificacion lo hhace veeer bieen feo.

    Hasta ahora solo lo solucionaba achicando la imagen para que se notara tanto la jusifiaciion, aunque ahora voy a probar est meetod a ver como me resultan.

    Saludos…

    Responder

  3. Si todo muy lindo pero no me funciona el plugin para wordpress.
    Tengo actualizado el Mozilla Firefox, segun dice el autor del plugin que este navegador lo acepta. Pues yo le hice hasta macumba para que funcione, y nada, ni un guión aparece ni un corte de palabra. Asi como estaba el párrafo antes de hyphenator, asi quedó.

    Responder

  4. ami me funciona muy bien, solo que estaba buscando como hacer para que no me deje tanto espacio entre las palabras, ya que veo que tiene la opción de cortar una para que el párrafo no quede con tanto aire entre medio de las palabras. si saben como, les agradecería que me dieran una mano.

    Responder