Wikilengua
Ir a la navegaciónIr a la búsqueda
(Página creada con «La '''ortotipografía para la web''' presenta características especiales en la medida en que algunas reglas tradiciones no se aplican de modo automático por los navegador...»)
 
Línea 2: Línea 2:
  
 
HTML suele usarse en conjunción con CSS, que proporciona mecanismos para definir el formato de presentación del texto y otros elementos de las páginas. CSS puede usarse para reajustes [[Ortotipografía|ortotipográficos]] que permiten la aplicación de las normas [[Ortografía|ortográficas]] y diversas recomendaciones de [['estilo]]. Los estilos de CSS se pueden aplicar a una palabra o un grupo de palabras mediante el elemento <code>span</code>.
 
HTML suele usarse en conjunción con CSS, que proporciona mecanismos para definir el formato de presentación del texto y otros elementos de las páginas. CSS puede usarse para reajustes [[Ortotipografía|ortotipográficos]] que permiten la aplicación de las normas [[Ortografía|ortográficas]] y diversas recomendaciones de [['estilo]]. Los estilos de CSS se pueden aplicar a una palabra o un grupo de palabras mediante el elemento <code>span</code>.
 
=== Espacio de no división ===
 
 
Este [['espacio]] se puede obtener en HTML con la entidad <code>&nbsp</code>. Este espacio puede usarse, por ejemplo, entre cifras y los símbolos que le siguen. Por ejemplo:
 
<pre>
 
<p>El margen es del 10&amp;nbsp;%, aunque puede llegar al 12&amp;nbsp;%.</p>
 
</pre>
 
También es útil en abreviaturas como ''EE. UU.'' o cuando una cifra sigue a una palabra como ''página'', ''piso'', ''capítulo'', etc.
 
<pre>
 
En los EE.&amp;nbsp;UU. vive en el piso&amp;nbsp;87.
 
</pre>
 
 
=== Espacio fino ===
 
 
El [['espacio]] fino también se puede obtener directamente en HTML con la entidad <code>&thinsp;</code>. Este espacio no evita el salto de línea, pero puede conseguirse este efecto con CCS y el valor <code>nowrap</code> de la propiedad <code>white-space</code>. Esta función es particularmente útil en los números, pues la separación de miles debería ser un espacio fino de no división:
 
<pre>
 
Se analizó el ADN de <span style="white-space:nowrap">75&amp;thinsp;000</span> personas.
 
</pre>
 
 
Recuérdese que también se puede definir una clase en un archivo css externo. Por ejemplo, en el <code>.css</code>:
 
<pre>
 
.num { white-space:nowrap; }
 
</pre>
 
Y en el archivo HTML:
 
<pre>
 
Se analizó el ADN de <span class="num">75&amp;thinsp;000</span> personas.
 
</pre>
 
 
=== Espaciado con cursivas ===
 
 
Ciertos estilos establecen que los signos de [['puntuación]] han de ir [['cursiva]] si la palabra a la que van unidos también va en cursiva, pero otros en cambio recomiendan que vaya en redonde si ese es el estilo que corresponde a la oración en la que están.
 
 
Mientras que los programas de maquetación reajustan el espacio de modo automático en textos impresos o en PDF, los navegadores rara vez hacen reajustes tipográficos de este tipo y una letra en cursiva puede superponerse a un paréntesis o un punto y coma que le siga, si este último va en redonda. Con las propiedades <code>margin</code> o <code>padding</code> (y sus variantes <code>margin-left</code>, <code>margin-right</code>, etc.) puede añadirse algo de espacio a los lados del signo:
 
<pre>
 
... una forma de <em>downshifting</em><span style="margin-left:.1em">;</span> sin
 
embargo, perdemos unos...
 
</pre>
 
 
=== Interlínea ===
 
 
Las mayúsculas con acentos pueden presentar problemas si la interlínea, es decir, la distancia entre dos líneas, es pequeña (de modo que el acento gráfico puede tocar los descendentes de letras como ''g'' o ''q'' en el renglón superior). La interlínea se puede ajustar con la propiedad de CSS <code>line-height</code>. Una forma simple de aumentarla es con un porcentaje:
 
<pre>
 
p { line-height: 120%; }
 
</pre>
 
Hay más métodos, como dar el tamaño y el cuerpo de una vez al estilo clásico en <code>font-size</code>:
 
<pre>
 
p { font-size: 15px/1.4em; }
 
</pre>
 
Aquí, <code>em</code> es un cuadratín en el tamaño de fuente  seleccionado (en este caso equivale a <code>140%</code>).HTML suele usarse en conjunción con CSS, que proporciona mecanismos para definir el formato de presentación del texto y otros elementos de las páginas. CSS puede usarse para reajustes [[Ortotipografía|ortotipográficos]] que permiten la aplicación de las normas [[Ortografía|ortográficas]] y diversas recomendaciones de [['estilo]]. Los estilos de CSS se pueden aplicar a una palabra o un grupo de palabras mediante el elemento <code>span</code>.
 
  
 
=== Espacio de no división ===
 
=== Espacio de no división ===

Revisión del 08:36 12 ago 2013

La ortotipografía para la web presenta características especiales en la medida en que algunas reglas tradiciones no se aplican de modo automático por los navegadores sino de modo explícito mediante el marcado apropiado del archivo HTML.

HTML suele usarse en conjunción con CSS, que proporciona mecanismos para definir el formato de presentación del texto y otros elementos de las páginas. CSS puede usarse para reajustes ortotipográficos que permiten la aplicación de las normas ortográficas y diversas recomendaciones de estilo. Los estilos de CSS se pueden aplicar a una palabra o un grupo de palabras mediante el elemento span.

1 Espacio de no división

Este espacio se puede obtener en HTML con la entidad &nbsp. Este espacio puede usarse, por ejemplo, entre cifras y los símbolos que le siguen. Por ejemplo:

<p>El margen es del 10&nbsp;%, aunque puede llegar al 12&nbsp;%.</p>

También es útil en abreviaturas como EE. UU. o cuando una cifra sigue a una palabra como página, piso, capítulo, etc.

En los EE.&nbsp;UU. vive en el piso&nbsp;87.

2 Espacio fino

El espacio fino también se puede obtener directamente en HTML con la entidad . Este espacio no evita el salto de línea, pero puede conseguirse este efecto con CCS y el valor nowrap de la propiedad white-space. Esta función es particularmente útil en los números, pues la separación de miles debería ser un espacio fino de no división:

Se analizó el ADN de <span style="white-space:nowrap">75&thinsp;000</span> personas.

Recuérdese que también se puede definir una clase en un archivo css externo. Por ejemplo, en el .css:

.num { white-space:nowrap; }

Y en el archivo HTML:

Se analizó el ADN de <span class="num">75&thinsp;000</span> personas.

3 Espaciado con cursivas

Ciertos estilos establecen que los signos de puntuación han de ir cursiva si la palabra a la que van unidos también va en cursiva, pero otros en cambio recomiendan que vaya en redonde si ese es el estilo que corresponde a la oración en la que están.

Mientras que los programas de maquetación reajustan el espacio de modo automático en textos impresos o en PDF, los navegadores rara vez hacen reajustes tipográficos de este tipo y una letra en cursiva puede superponerse a un paréntesis o un punto y coma que le siga, si este último va en redonda. Con las propiedades margin o padding (y sus variantes margin-left, margin-right, etc.) puede añadirse algo de espacio a los lados del signo:

... una forma de <em>downshifting</em><span style="margin-left:.1em">;</span> sin
embargo, perdemos unos...

4 Interlínea

Las mayúsculas con acentos pueden presentar problemas si la interlínea, es decir, la distancia entre dos líneas, es pequeña (de modo que el acento gráfico puede tocar los descendentes de letras como g o q en el renglón superior). La interlínea se puede ajustar con la propiedad de CSS line-height. Una forma simple de aumentarla es con un porcentaje:

p { line-height: 120%; }

Hay más métodos, como dar el tamaño y el cuerpo de una vez al estilo clásico en font-size:

p { font-size: 15px/1.4em; }

Aquí, em es un cuadratín en el tamaño de fuente seleccionado (en este caso equivale a 140%).