La tecla de acceso 'n' lleva a la navegación de la página. Ir al inicio del contenido.

Este documento es una traducción. En caso de discrepancias o errores, la única versión normativa es el último original en inglés. Los derechos de autor originales corresponden al W3C, como puede verse al final de la página.

Traductor: Spanish Translation Team, Spanish Translation US.

s_gotoW3cHome Internacionalización
 

Estilo y etiquetado de ruby

Audiencia de destino: Los codificadores de XHTML/HTML (que usan editores o lenguaje de script), los desarrolladores scripts (PHP, JSP, etc.), codificadores CSS y todos aquellos que quieran aprender a utilizar las anotaciones ruby.

Ruby es el nombre que se le otorga a anotaciones pequeñas que se representan a lo largo del texto base. Esto es particularmente útil para el japonés y cualquier otro contenido de Asia Oriental (ruby se conoce como furigana en japonés).

La especificación de la Anotación ruby proporciona una forma de etiquetar el texto ruby y ha sido adoptada como un módulo de XHTML 1.1. Esta especificación se encuentra en funcionamiento en CSS3 en mecanismos que son compatibles con el estilo del texto ruby.

Este artículo le brindará información preliminar sobre los mecanismos básicos de esta anotación y analizará los últimos avances con respecto a la compatibilidad con ruby.

¿Qué es ruby?

Desafortunadamente, este rubí (ruby, por su denominación en inglés) no se refiere a una mujer glamorosa. Este término técnico más prosaico se refiere a un tipo particular de anotación asociada a un texto base. El nombre 'ruby' debe su origen a un tamaño de fuente (cerca de la mitad del tamaño de la fuente de 10 puntos) usado por tipógrafos británicos.

Típicamente, el ruby se usa en sistemas de escritura de Asia Oriental para brindar transcripciones fonéticas de caracteres oscuros o de caracteres con los que es posible que el lector no esté familiarizado. Por ejemplo, se usa ampliamente en materiales educativos y textos para niños. También se usa ocasionalmente para brindar información sobre el significado de caracteres ideográficos.

En japonés, en donde ruby se denomina furigana, las transcripciones fonéticas suelen aparecer en hiragana sobre un texto horizontal y a la derecha del texto vertical. A pesar de que el ruby en japonés suele estar en hiragana, es posible también encontrarlo ocasionalmente en anotaciones en kanji, katakana (especialmente en cómics japoneses 'manga') y textos en latín.

Por lo general, el furigana aparece debajo del texto horizontal y a la izquierda del texto vertical en las ocasiones excepcionales en las que se usa para expresar información semántica.

Ejemplo de ruby en japonés.

Ejemplo de ruby en japonés.

El uso de la anotación ruby no se limita al japonés. De hecho, no se encuentra limitado necesariamente a ninguno de los sistemas de escritura asiáticos. Se puede usar como un dispositivo de anotación en muchas aplicaciones diferentes, tales como glosarios y anotaciones lingüísticas.

La siguiente ilustración muestra ejemplos de texto ruby usando latín, kanji y katakana para una anotación de texto base.

En texto y anotaciones ruby, cualquier carácter es válido.

En texto y anotaciones ruby, cualquier carácter es válido.

Aquí se observan caracteres de chino simplificado anotados con transliteraciones de pinyin debajo de cada carácter.

Ejemplo de ruby en el sistema de escritura de chino simplificado.

Ejemplo de ruby en el sistema de escritura de chino simplificado

Dicha anotación en chino tradicional suele usar caracteres de bopomofo para indicar la pronunciación y, en lugar de que la anotación aparezca sobre el texto principal, se incluye verticalmente a la derecha de cada carácter, sin importar si el texto principal se desplaza vertical u horizontalmente.

Advierta cómo las marcas de tono aparecen a la derecha de la columna de los caracteres alfabéticos bopomofo.

Ejemplo de ruby en el sistema de escritura de chino tradicional.

Ejemplo de ruby en el sistema de escritura de chino tradicional

Etiquetado de ruby

Existen dos aspectos al trabajar con texto ruby: el primero es brindar información estructural mediante etiquetas que relacionen el ruby y su texto base; el segundo consiste en contestar preguntas de presentación (estilo), tales como qué ocurre si un texto ruby extenso se superpone con un texto base adyacente, qué ocurre si un texto ruby corto se encuentra centrado o alineado a la izquierda sobre un texto base extenso, etc. En esta sección intentaremos expresar la estructura usando el etiquetado.

La Recomendación del W3C sobre la Anotación ruby (también disponible en japonés) describe el etiquetado compatible que puede usarse con el carácter ruby.

La especificación define dos variantes de etiquetado ruby, denominados etiquetado ruby simple y etiquetado ruby complejo.

Ruby simple

El etiquetado ruby simple asocia una secuencia única de texto ruby con una secuencia de texto base.

Etiquetado ruby simple.

Etiquetado ruby simple.

El ejemplo anterior muestra el resultado visual deseado, seguido por el etiquetado que debería generarlo.

Tratamos de colocar la secuencia hiragana かみしばい sobre la parte superior del texto base 紙芝居, que forma parte de una oración más larga. La anotación suele estar en un tamaño de fuente pequeño.

El primer paso es encerrar tanto el texto base como la anotación con un etiquetado ruby. Luego, ahí dentro, debe agregar el texto base a un elemento rb (base ruby) y la anotación a un elemento rt (texto ruby), en ese orden. Eso es todo. Si su agente de usuario sabe o no cómo mostrar este etiquetado es otra pregunta que responderemos más adelante.

El etiquetado de la oración completa debería ser por tanto:

<p>これは<ruby><rb>紙芝居</rb><rt>かみしばい</rt></ruby>です。</p>

Ruby complejo

El etiquetado ruby complejo puede definir asociaciones más refinadas entre anotaciones y texto base, y puede asociar dos textos ruby con un texto base. Observemos esto en pasos sencillos.

Mientras que en el ejemplo del etiquetado ruby simple que vimos antes se asoció una secuencia entera del texto de la anotación con una secuencia entera del texto base, el etiquetado ruby complejo nos permite indicar qué parte de la anotación se relaciona con cada carácter en un elemento ruby único.

Etiquetado ruby complejo.

Etiquetado ruby complejo.

En el ejemplo anterior se muestran tres caracteres del texto base 林和代 anotados para la pronunciación con las tres secuencias はやし, かず y . Cada anotación se encuentra claramente alineada con su carácter respectivo.

Para etiquetar los datos de forma que podamos realizar esto, usaremos dos elementos nuevos rbc (contenedor de base ruby) y rtc (contenedor de texto ruby). En el caso más simple (que se muestra en la diapositiva), cada uno de los elementos contiene la misma cantidad de elementos rb y rt, respectivamente. De esta forma, se pueden agrupar adecuadamente un elemento rb y su respectivo elemento rt.

Esto es similar a usar los elementos td dentro de los elementos tr en tablas HTML.

El etiquetado completo es el siguiente, tal como se muestra en la diapositiva:

<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt>かず</rt><rt>よ</rt> </rtc>
</ruby>

La regla es: el ruby simple no tiene elementos rbc o rtc; el ruby complejo tiene los elementos rtc y rtc.

De una a varias asociaciones. Podemos aprender un poco más al respecto. En el siguiente diagrama, usaremos el mismo ejemplo, pero dividiremos la anotación en sólo dos secuencias: la primera sobre el nombre de la familia, , y la segunda sobre el nombre otorgado 和代. En otras palabras, hemos asociado una secuencia de anotaciones con múltiples secuencias de caracteres base.

De una a varias asociaciones con etiquetado ruby complejo.

De una a varias asociaciones con etiquetado ruby complejo.

Esto se logra aplicando un método familiar a los que han creado las tablas en HTML. El segundo y tercer elemento rt se convierten en uno, con el agregado de un atributo rbspan cuyo valor es, en este caso, 2.

Ahora el etiquetado es el siguiente:

<ruby>
<rbc><rb>林</rb> <rb>和</rb> <rb>代</rb></rbc>
<rtc> <rt>はやし</rt><rt rbspan="2">かずよ</rt> </rtc>
</ruby>

Anotaciones múltiples. En nuestro ejemplo final de anotación de ruby complejo, mostramos cómo asociar texto base con 2 anotaciones al mismo tiempo. En el ejemplo que se encuentra en la parte superior de la siguiente ilustración se observa esta situación para el japonés, en donde una anotación se ejecuta sobre el texto base y la otra por debajo.

Anotaciones múltiples con etiquetado ruby complejo.

Anotaciones múltiples con etiquetado ruby complejo.

En el ejemplo mantenemos este procedimiento sencillo, usando un único par de rb y rt. Lo nuevo aquí es que tenemos dos elementos rtc dentro del elemento ruby (aunque aún hay un solo elemento rbc).

Este es el código:

<ruby>
<rbc><rb>民政局</rb></rbc>
<rtc><rt>みんせいきょく</rt></rtc>
<rtc><rt>ガバメント・セクシヨン</rt></rtc>
</ruby>

No puede tener más de dos elementos rtc asociados a un único elemento rbc.

Vista predeterminada del etiquetado

La especificación de la Anotación ruby no brinda un texto normativo sobre la ubicación de las anotaciones, dejando esto para el ámbito de la implementación. Sin embargo, existen ciertas sugerencias informativas para los agentes de usuario con respecto al estilo predeterminado. (También hay propiedades de estilo útiles especificadas en el Módulo ruby de CSS3, que analizaremos en la siguiente sección.)

Si en una implementación se aplica la sugerencia incluida en la especificación, podría esperar que el tamaño de fuente de la anotación fuese cerca de la mitad de alto del texto base y que la anotación en ruby simple apareciese en la posición anterior (antes) al texto base. En este caso, 'anterior' es un término técnico usado para designar el área por encima de una línea normal de texto horizontal y el área a la derecha de una línea de texto vertical, cuyas columnas se desplazan de derecha a izquierda (p.ej., texto vertical en chino, japonés y coreano). También es posible que el texto ruby tenga el mismo sentido que el texto base (es decir, vertical u horizontal). Si hay varias anotaciones para una única base, es posible que la primera aparezca antes de la base y la segunda después (posición posterior), es decir, debajo del texto horizontal y a la izquierda del texto vertical cuyas columnas se desplazan de derecha a izquierda.

'Anterior' significa a la izquierda de una línea de texto vertical en mongol, ya que las columnas se desplazan de izquierda a derecha.

Ilustración visual de 'anterior' y 'posterior'.

Ilustración visual de 'anterior' y 'posterior'.

Es muy probable que esto genere los resultados esperados para texto en japonés; sin embargo, el comportamiento esperado puede ser diferente en otros sistemas de escritura. Por ejemplo, en la especificación se indica que el ruby pinyin suele aparecer después del texto base en chino. Es posible que sea necesaria la compatibilidad con un estilo adicional para lograr esto con ruby simple.

Asimismo, la especificación se centra en el hecho de que el ruby bopomofo suele aparecer en texto en chino a la derecha de los caracteres del texto horizontal, pero no brinda ninguna recomendación acerca de cómo manejar tal situación.

Nota: Puede encontrar detalles sobre como aplicar formato a ruby en un contexto de impresión en japonés en el estándar JIS X 4051 sobre cómo aplicar formato a documentos en japonés ("Formatting rules for Japanese documents" (日本語文書の組版方法) JIS X 4051:2004, Japanese Standards Association, 2004 [en japonés]).

También veremos (a continuación) características de recursos alternativos definidos en el estándar que permiten al texto base y ruby ser presentados de forma secuencial en los agentes de usuarios que todavía no controlan el etiquetado.

Un mecanismo de recurso alternativo

Si bien estamos analizando el tema de la visualización, existen otras cuestiones sobre el etiquetado que aún no hemos explorado. Si un agente de usuario no comprende cómo mostrar el texto ruby, simplemente se mostrará el texto base seguido inmediatamente por el texto ruby, usando el mismo tamaño de fuente (como se muestra en la diapositiva). Esto puede ser confuso para el lector.

El elemento rp (ruby paréntesis) le permite especificar los caracteres que se observarán alrededor del texto ruby simple si el agente de usuario no es compatible con la presentación de ruby. Es muy posible que desee usar los paréntesis aquí; sin embargo, cualquier carácter o secuencia de caracteres es válida.

Ruby sin etiqueta rp.

Ruby sin etiqueta rp.

Si agregamos elementos rp antes y después del texto ruby, como en este ejemplo, cuando un agente de usuario no pueda reconocer el texto ruby este aparecerá entre paréntesis, lo cual es mucho más aceptable. Los agentes de usuario que no sepan cómo operar el ruby ocultarán automáticamente el contenido de los elementos rp al mismo tiempo que muestran el ruby en la ubicación apropiada.

<ruby>
<rb>紙芝居</rb>
<rp>(</rp>
<rt>かみしばい</rt>
<rp>)</rp>
</ruby>

Podemos usar cualquier carácter dentro del elemento rp. Por ejemplo, en ocasiones el japonés usa diferentes caracteres para los paréntesis.

Ruby con etiqueta rp.

Ruby con etiqueta rp

Observe que este mecanismo de recurso alternativo no está disponible para el ruby complejo.

Estilo de ruby

El Módulo ruby de CSS3 brinda varias propiedades para describir la ubicación del texto ruby en relación con el texto base. Advierta que esta especificación aún no se terminó, de modo que en esta sección intentaremos darle una idea de lo que se puede hacer con esta especificación, en lugar de enumerar exhaustivamente todas las características.

Usaremos las palabras 'anterior' y 'posterior' con el mismo significado que describimos anteriormente.

Existen tres propiedades principales: posición de ruby, excedente de ruby y alineación de ruby (ruby-position, ruby-overhang y ruby-align, respectivamente).

Entre los temas que no analizaremos aquí se incluyen los siguientes:

Posición de ruby

La primera propiedad, ruby-position, le permite indicar en qué lugar aparecerá el texto ruby en relación al texto base.

ruby-position puede tener los siguientes valores: before, after, inline y right (anterior, posterior, en línea y derecha, respectivamente). Puede aplicar este estilo al elemento ruby.

Para colocar el texto ruby sobre el texto base horizontal o a la derecha del texto vertical, use ruby-position: before. Este es el comportamiento predeterminado.

Ruby-position: before

Ruby-position: before

Para colocar el texto ruby debajo del texto base horizontal o a la izquierda del texto vertical, use ruby-position: after.

Ruby-position: after

Ruby-position: after

Por ejemplo, si su documento contiene texto en chino con ruby pinyin y si usted desea que todos los ruby aparezcan debajo del texto base, debe incluir lo siguiente en sus declaraciones de CSS:

ruby { ruby-position: after; }

Si quiere hacer que el texto ruby aparezca en línea, debe usar ruby-position: inline. Advierta que a causa de un error, esto no se explica en la versión actual de la especificación sobre ruby de CSS3.

Ruby-position: inline

Ruby-position: inline

Los paréntesis de la ilustración anterior deben incluirse en la etiqueta rp.

Alineación de ruby

La propiedad ruby-align trata la alineación relativa del texto base y texto ruby en caso de que uno sea más largo que el otro. Básicamente, el efecto se aplica al que sea más corto, ya sea el texto ruby o el texto base. La propiedad adquiere los siguientes valores: auto, left, start, center, end, right, distribute-letter, distribute-space, y line-edge (automático, izquierda, inicio, centro, final, derecha, distribuir letras, distribuir espacio y extremo de línea, respectivamente).

Nota: para estos ejemplos se eligen dos palabras por separado, una a la izquierda y otra a la derecha de la línea vertical. Esta línea sirve únicamente para dividir los ejemplos en las diapositivas; no es un producto del estilo.

Si aplica auto, el comportamiento se llevará a cabo en la implementación, pero el comportamiento recomendado (descrito en el estándar JIS 4051) es aplicar distribute-letter a los caracteres en chino, japonés o coreano hasta lograr un ancho completo, pero aplicar center a los otros caracteres. Este es el comportamiento predeterminado.

ruby-align: distribute-letter esparce el texto más corto aplicando un espaciado homogéneo entre los caracteres, de modo que los extremos iniciales del primer carácter ruby y base se encuentren alineados, tal como lo están los extremos de los últimos caracteres ruby y base.

Ruby-align: distribute-letter

Ruby-align: distribute-letter

ruby-align: distribute-space hace lo mismo que ruby-align: distribute-letter, pero deja un pequeño espacio antes del primer y después del último carácter afectado.

Ruby-align: distribute-space

Ruby-align: distribute-space

ruby-align: center alinea los centros del texto ruby y del texto base.

Ruby-align: center

Ruby-align: center

ruby-align: left y ruby-align: start son sinónimos y su efecto es alinear el inicio del texto ruby y del texto base.

Ruby-align: left / start

Ruby-align: left / start

ruby-align: right y ruby-align: end son sinónimos y su efecto es alinear el final del texto ruby y del texto base.

Ruby-align: right / end

Ruby-align: right / end

Excedente de ruby

Si el texto ruby es más ancho que el texto base, puede indicar si éste excede o no al texto base que se encuentra alrededor y en qué medida lo supera, usando la propiedad ruby-overhang (excedente de ruby). La propiedad adquiere los siguientes valores: auto, start, end y none (automático, inicio, final y ninguno, respectivamente).

Para permitir que el texto ruby se superponga con los caracteres base que lo rodean a ambos lados, use ruby-overhang: auto. Al momento de la implementación decidirá el alcance de la superposición, pero el estándar JIS 4051 recomienda un máximo de un carácter ruby de ancho. En la implementación también se puede aplicar esto de forma selectiva, según el tipo de carácter. Nuevamente, el estándar JIS proporciona reglas al respecto.

Ésta es el valor predeterminado.

Ruby-overhang: auto

ruby-overhang: start permite únicamente que el texto ruby exceda a los caracteres base que le preceden.

Ruby-overhang: start

ruby-overhang: end permite únicamente que el texto ruby exceda a los siguientes caracteres base.

Ruby-overhang: end

ruby-overhang: none evita todo excedente.

Ruby-overhang: none

Implementación de ruby

Especificaciones

La especificación de etiquetado sobre Anotación ruby se convirtió en Recomendación de W3C en mayo de 2001, de modo que ésta es una tarea finalizada.

El etiquetado de la anotación ruby no es válido en documentos HTML 4 o XHTML 1.0. Sin embargo, la especificación es uno de los módulos que conforman XHTML 1.1. También se espera que sea uno de los módulos de XHTML 2.0, que está siendo desarrollado.

Es muy probable que el trabajo que está siendo realizado por el Grupo de trabajo Conjunto de Etiquetas de Internacionalización (ITS)del W3C para generar un vocabulario de etiquetado que puedan usar los desarrolladores de esquemas para la internacionalización y la localización de documentos incorpore el etiquetado ruby.

El Módulo ruby del CSS3 fue designado como Recomendación candidata el 14 de mayo de 2003; sin embargo, todavía necesita algunas modificaciones editoriales. Una vez finalizado el texto, deberán encontrarse algunas implementaciones, y crearse y aplicarse pruebas para que la especificación adquiera el estado de Propuesta y luego de Recomendación total.

Estado de la implementación

La especificación de etiquetado de la Anotación ruby define dos niveles de conformidad. Las implementaciones pueden ser compatibles con un etiquetado ruby simple o con ambos etiquetados ruby simple y complejo.

Internet Explorer 5+ es compatible con el etiquetado ruby simple en varios tipos de documentos. A pesar de que la implementación actual no es exactamente igual a la especificación, aún funciona correctamente con el etiquetado estándar. Esto significa que al visualizarla, coloca al texto ruby por encima del texto base y elimina los caracteres de los elementos rp. Dado que este etiquetado no es estándar para HTML o XHTML 1.0, no podemos recomendar su uso para dichos formatos (sus páginas no realizarán la validación). Sin embargo, ruby simple también es compatible con documentos XHTML 1.1, en los cuales su uso es válido.

El explorador del W3C, Amaya, es compatible tanto con el diseño de ruby simple (en gran medida) como complejo.

Existe una extensión para los exploradores Mozilla, Netscape 7 y Firefox que es compatible con ruby simple y complejo, incluido rbspan, para páginas ejecutadas como "application/xhtml+xml" (no como "text/html"). Sin embargo, la ubicación de la descarga advierte que:

"This extension sometimes causes crush when you show popup menus, load webpages, or operate tabs, because it intrudes into operations about loading pages. Please don't use it if you would like to use stable browser." (A veces esta extensión causa un atasco cuando se muestran los menús emergentes, cuando se cargan páginas web o al operar etiquetas, dado que se entromete en las operaciones de carga de páginas. No la use si desea utilizar un explorador estable.)

Masayasu Ishikawa también escribió un artículo en el que propone algunas formas alternativas de visualizar el ruby simple en Mozilla/Firefox, Safari y Opera versión 8.

Aquí se incluyen algunas pruebas de etiquetado de ruby simple y complejo en el sitio de W3C.

Internet Explorer también brinda una compatibilidad muy limitada para algunas propiedades del Módulo ruby del CSS3, pero no siempre al usar los mismos valores de propiedad, tal como se indica en la especificación. De lo contrario, es posible que no encuentre compatibilidad para estas propiedades aún; lo cual no sorprende, dado que la especificación todavía no es una recomendación.

Dinos qué piensas (en Inglés).

Suscripción a feed RSS.

Nuevos recursos

Noticias de la página de inicio

Twitter (Noticias de la página de inicio)

‎@webi18n

Lecturas complementarias

De: Richard Ishida, W3C. Traductor: Spanish Translation Team, Spanish Translation US..

XHTML 1.0 válido
CSS válido
Codificado en UTF-8

Traducido del inglés con fecha 2005-07-21. Traducción modificada por última vez el 2011-05-04 7:04 GMT.

Para ver el historial de cambios del documento, busque article-ruby en la bitácora de internacionalización.