Wikilengua
Ir a la navegaciónIr a la búsqueda
 
(No se muestran 6 ediciones intermedias de 3 usuarios)
Línea 1: Línea 1:
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]].
+
[[Categoría:Ortotipografía]] [[Categoría:Lista de ortotipografía por temas]] [[Categoría:Ortografía]] {{sobre|ortotipografía}}
 +
 
 +
La '''ortotipografía para la web''' presenta características especiales en la medida en que algunas reglas tradicionales 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 [[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>.
Línea 6: Línea 8:
  
 
== Espacio de no división o espacio duro ==
 
== Espacio de no división o espacio duro ==
 
 
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:
 
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>
 
<pre>
Línea 17: Línea 18:
  
 
== Espacio fino ==
 
== Espacio fino ==
 
 
El [['espacio]] fino también se puede obtener directamente en HTML con la entidad <code>&amp;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:
 
El [['espacio]] fino también se puede obtener directamente en HTML con la entidad <code>&amp;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>
 
<pre>
Línea 33: Línea 33:
  
 
== Espaciado con cursivas ==
 
== Espaciado con cursivas ==
 
+
Ciertos estilos establecen que los signos de [['puntuación]] han de ir en [['cursiva]] si la palabra a la que van unidos también va en cursiva, pero otros en cambio recomiendan que vaya en redonda si ese es el estilo que corresponde a la oración en la que están.
Ciertos estilos establecen que los signos de [['puntuación]] han de ir en [['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:
 
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:
Línea 49: Línea 48:
  
 
== Interlínea ==
 
== 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:
 
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>
 
<pre>
Línea 61: Línea 59:
  
 
== Citas con el elemento <code>q</code> ==
 
== Citas con el elemento <code>q</code> ==
 
 
El elemento <code>q</code> de HTML5 está destinado a citas. Por omisión, en los navegadores se destaca con las [[Comillas|comillas]] “”, pero es posible cambiar mediante CSS los caracteres empleados. Con las siguientes definiciones emplea «» para el nivel exterior, “” para el entrecomillado en su interior y ‘’ para las comillas dentro de “”:
 
El elemento <code>q</code> de HTML5 está destinado a citas. Por omisión, en los navegadores se destaca con las [[Comillas|comillas]] “”, pero es posible cambiar mediante CSS los caracteres empleados. Con las siguientes definiciones emplea «» para el nivel exterior, “” para el entrecomillado en su interior y ‘’ para las comillas dentro de “”:
 
<pre>
 
<pre>
Línea 78: Línea 75:
 
* [[Redacción para la web]]
 
* [[Redacción para la web]]
 
}}
 
}}
[[Categoría:Diseño]][[Categoría:Ortotipografía]]
+
 
{{destacado|2015-10-26}}
+
{{destacado|2020-11-16}}

Revisión actual del 12:51 17 dic 2020


La ortotipografía para la web presenta características especiales en la medida en que algunas reglas tradicionales 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.

Dado que no todos los programas interpretan por igual los códigos y pueden tener configuraciones personales, además de haber diferencias en pantallas, sistemas, etc., algunos reajustes tienen que pasar muchas veces por pruebas en diversos entornos, para comprobar su adecuación.

1 Espacio de no división o espacio duro[editar]

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[editar]

El espacio fino también se puede obtener directamente en HTML con la entidad &thinsp;. 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[editar]

Ciertos estilos establecen que los signos de puntuación han de ir en cursiva si la palabra a la que van unidos también va en cursiva, pero otros en cambio recomiendan que vaya en redonda 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...

Una alternativa, que requiere que el código HTML esté pulido y bien construido, es añadir sistemáticamente un espacio al final de todo texto en cursiva. Si el elemento usado es em, el archivo de estilo puede contener (el valor exacto puede variar):

em { margin-right: .1em; }

Incluso si el reajuste no fuera el tipográficamente deseable, a menudo puede mejorar, al menos, un poco la apariencia.

4 Interlínea[editar]

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%).

5 Citas con el elemento q[editar]

El elemento q de HTML5 está destinado a citas. Por omisión, en los navegadores se destaca con las comillas “”, pero es posible cambiar mediante CSS los caracteres empleados. Con las siguientes definiciones emplea «» para el nivel exterior, “” para el entrecomillado en su interior y ‘’ para las comillas dentro de “”:

q { quotes: '«' '»' '“' '”' '‘' '’'; }
q:before { content: open-quote; }
q:after { content: close-quote; }

Los navegadores más antiguos pueden tener problemas en entender estas instrucciones, pero se pueden encontrar soluciones[1].

De idéntico modo se puede redefinir blockquote si fuera necesario.

6 Notas y referencias[editar]


Este artículo fue seleccionado como destacado en 2020-11-16.