Contenido
- Conocimiento necesario: CSS, jQuery básico
- Requiere: jQuery, CSS, HTML
- Tiempo de proyecto: 30 minutos
- Descargar archivos de origen
Suponiendo que diseñe desde el contenido, la primera decisión para efectuar su diseño posee estar relacionado con el tipo. Incluso por no eligiendo un tipo de letra, ha hecho algo que impacta en su sitio. La tipografía es fundamental para la impresión y el diseño web, y es compleja; hay una gran cantidad de términos, prácticas, reglas y técnicas acumulados que se utilizan para su buen uso. Este artículo trata sobre una técnica para administrar un aspecto de la tipografía, una que ha sido difícil de hacer en línea pero que es de rutina en la impresión: mantener un ritmo vertical constante, que a su vez nos permite lograr un diseño profesional.
Tipo de disposición
En forma impresa, para cualquier elemento con una cantidad considerable de texto, es probable que la base del diseño sea una cuadrícula de referencia. Se utiliza para estructurar la página y guía el flujo vertical del contenido. Casi todo se coloca con respecto a esa cuadrícula de línea base. No se preocupe si no reconoce los términos, nadie desconoce las líneas de base o las cuadrículas de línea de base; ya los conoces. Piense en la escuela, cuando sin duda escribía en papel rayado, mientras escribía, colocaba la parte inferior de las letras en cada una de las líneas del papel. La línea de base y la cuadrícula de línea de base en acción. La línea de base es una línea imaginaria sobre la que se alinea la parte inferior de las letras.Si miras este artículo ahora, "verás" una línea de base, aunque en realidad no hay una línea. Tu cerebro pone uno ahí para ti, es por eso que puedes leer oraciones. ¿Las líneas en papel rayado? Son una cuadrícula de referencia. Recto para que sus oraciones sean rectas y se establezcan a intervalos regulares para que su texto tenga un ritmo vertical regular.
Ritmo vertical
El ritmo vertical dicta dónde se ubica el texto de la página. Es un componente que afecta nuestra capacidad para escanear y leer bloques de texto y ayuda a informar nuestras respuestas emocionales. Cuando el texto tiene un fuerte ritmo vertical y un buen espaciado, sentimos que es profesional, considerado, autorizado y cómodo de leer. Cuando el texto tiene un ritmo y espaciado deficientes, sentimos que se considera menos considerado, menos profesional y, a menudo, más difícil de leer. El ritmo vertical es una parte de usabilidad y una parte de estética.
Conduciendo el ritmo
Desafortunadamente, la web sigue siendo la prima pobre de la imprenta en términos de su capacidad para implementar algunas prácticas fundamentales con respecto a la tipografía. En la Web, no podemos usar una cuadrícula de línea de base de la misma manera que lo hace un diseñador de impresión (o un niño en la escuela); no podemos alinear la línea de base del texto con la cuadrícula de línea de base de un documento. CSS no tiene el concepto de una cuadrícula de línea de base. Por lo tanto, nuestro texto no se ubicará exactamente en las líneas de una cuadrícula de referencia. En cambio, se centrará verticalmente en el espacio entre las líneas. Es lo mejor que puede hacer la Web.
Seamos prácticos con un documento de ejemplo. En primer lugar, estableceremos el ritmo haciendo una cuadrícula de línea de base visible. Para hacer esto, usaremos una imagen de fondo repetida para dibujar líneas horizontales regulares a 22 px de distancia:
- html {fondo: #fff url (baseline_22.png); }
¡Viva, tenemos nuestro papel rayado!
Notarás que nada se alinea. Para que todo quede alineado, queremos que el borde inferior de todos los elementos toque una de esas líneas. La forma más sencilla de hacerlo es asegurarse de que todos los elementos tomen una altura vertical (incluidos los márgenes) que sea un múltiplo de 22. Aquí hay algunos CSS que hacen precisamente eso. Estoy usando la unidad REM, pero ofrezco un respaldo de EM para los navegadores que no entienden REM. También incluyo el equivalente de la unidad PX en los comentarios. Si aún no comprende REM / EM, puede usar los valores px en su lugar; todos son equivalentes:
- html {/ * tamaño de fuente: 16px, altura de línea: 22px * /
- fuente: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
- fondo: #fff url (baseline_22.png); }
- h1, h2, h3, h4, h5, h6 {/ * margin-top and bottom son 22px * /
- / * em respaldo * / margen: 1.375em 0;
- margen: 1.375rem 0; }
- h1 {/ * el tamaño de la fuente es 32px, la altura de la línea es 44px * /
- / * em respaldo * / tamaño de fuente: 2em;
- tamaño de fuente: 2rem; altura de línea: 1,375; }
- h2 {/ * el tamaño de la fuente es 26px, la altura de la línea es 44px * /
- / * em respaldo * / tamaño de fuente: 1.75em;
- tamaño de fuente: 1.75rem; altura de línea: 1.5714285714; }
- h3, h4, h5, h6 {/ * el tamaño de la fuente es 22px, la altura de la línea es 22px * /
- / * em respaldo * / font-size: 1.375em;
- tamaño de fuente: 1.375rem; altura de línea: 1; }
- p, ul, blockquote {/ * el margen inferior es de 22px, la altura de la línea se hereda de html (22px) * /
- / * em respaldo * / margin-top: 0; margen inferior: 1.375em;
- margen superior: 0; margen inferior: 1.375rem; }
Echemos un vistazo a lo que eso nos brinda. ¿Observa cómo todo el texto se alinea bien? No se asienta en la línea de base, pero tiene un ritmo vertical predecible. Es bonito y ordenado.
Tratar con imágenes
Las imágenes complican las cosas. Echa un vistazo a lo que le pasa a nuestro ritmo cuando incluimos algunos. Lo interrumpen como un salto en un disco: el tempo es el correcto pero el tiempo está fuera de lugar. La alineación cambia. Esto se debe a que es poco probable que las imágenes tengan una altura que sea un múltiplo de la línea de base, por lo que el borde inferior no se alinea con nuestra cuadrícula de línea de base.
Para solucionarlo, todo lo que realmente necesitamos hacer es agregar un margen a cada imagen, haciendo que la parte inferior del margen se alinee con nuestra cuadrícula. Lo cual es lo suficientemente simple como para automatizar con un poco de JavaScript. Este es nuestro plan básico:
- Calcula la altura de cada imagen.
- Vea cuántas veces el valor de la línea de base se divide en el espacio vertical que ocupa actualmente la imagen y obtenga el resto.
- Reste el resto de la línea de base para obtener el desplazamiento que necesitamos aplicar en la imagen.
- Aplique el desplazamiento como margen en la parte inferior de la imagen.
La parte inferior del espacio vertical de la imagen ahora se alinearía correctamente con la cuadrícula de la línea de base. Aquí hay una función básica en jQuery que hace esto:
- $ (ventana) .bind ("cargar", función () {
- $ ("img"). cada (función () {
- / * variables * /
- var this_img = $ (esto);
- var baseline = 22;
- var img_height = this_img.height ();
- / * hacer las matemáticas * /
- var resto = parseFloat (img_height% baseline);
- / * ¿cuánto necesitamos agregar? * /
- var offset = parseFloat (línea de base-resto);
- / * aplicar el margen a la imagen * /
- this_img.css ("margen inferior", desplazamiento + "px");
- });
- });
Porqué el window.bind ¿línea? Porque tenemos que esperar hasta que se carguen las imágenes antes de poder obtener sus tamaños de manera confiable. A continuación, se muestra un ejemplo con este código básico en ejecución.
Mejorando jQuery
El mundo rara vez es sencillo, por lo que resulta que aquí tenemos que lidiar con bastantes detalles de implementación. ¿Qué pasa con la función que tenemos? Mucho:
- Produce resultados desagradables con imágenes en línea en lugar de flotantes o bloqueadas.
- Parece tener errores en algunas imágenes, específicamente las que están en contenedores.
- No se ocupa de diseños líquidos.
- No es muy reutilizable.
No queremos aplicar este comportamiento a imágenes que están en línea, como la carita sonriente en el ejemplo. Las imágenes en línea se alinean para que el borde inferior se asiente en la misma línea de base que el texto (no la cuadrícula de línea de base). Eso significa que la imagen está desplazada verticalmente. Ni CSS ni JS nos dan una forma de averiguar dónde está la línea de base para un elemento de texto, por lo que no conocemos el desplazamiento. Debemos ignorar las imágenes en línea y aplicar nuestra corrección solo a las imágenes que están configuradas para bloqueo de pantalla (afortunadamente, cualquier imagen flotante se configura automáticamente para mostrar el bloque).
Si una imagen está en un contenedor, el margen aplicado a la imagen puede estar oculto debido a la configuración de desbordamiento en el contenedor. Además, es posible que no queramos el margen en la imagen, sino en el elemento contenedor. En el ejemplo, preferimos tener márgenes en el cuadro blanco que en la imagen dentro del cuadro, por lo que podemos evitar que aparezcan espacios extraños en el cuadro.
La función solo se ejecuta una vez, pero en un diseño líquido, las imágenes cambian de altura cuando se cambia el tamaño del navegador (intente cambiar el tamaño del ejemplo a algo bastante estrecho para ver esto). Cambiar el tamaño rompe el ritmo de nuevo. Necesitamos que la función se ejecute después de que se haya cambiado el tamaño del navegador y también después de la carga de la página. Los diseños líquidos también presentan otros problemas; las imágenes pueden tener una altura de fracción de píxeles, por ejemplo 132,34 píxeles. Eso, a su vez, puede causar resultados inesperados, incluso si aplicamos un margen fraccionario (si está interesado, aquí le explicamos por qué: trac.webkit.org/wiki/LayoutUnit). Por lo tanto, vamos a necesitar masajear la imagen a la altura de un píxel completo para evitar errores de diseño causados por píxeles fraccionarios.
Por último, deberíamos convertir esto en una función más reutilizable. De hecho, con la complejidad que necesita una solución práctica sobre la solución teórica, deberíamos hacer un complemento que se pueda reutilizar en otros proyectos.
En el último ejemplo, encontrará el código que logra todo esto. El complemento JavaScript está muy comentado para que pueda seguirlo. Puede utilizar el complemento llamándolo de la siguiente manera:
- $ (ventana) .bind ("cargar", función () {
- $ ("img"). baselineAlign ();
- });
O puede decirle al complemento que aplique el margen a un contenedor con nombre, si existe uno como padre de la imagen:
- $ (ventana) .bind ("cargar", función () {
- $ ("img"). baselineAlign ({contenedor: ’. popup’});
- });
Conclusión
Mantener un buen ritmo vertical es una práctica de diseño sutil pero efectiva que se usa regularmente en la impresión. Ahora conoce los principios básicos, tiene un conocimiento práctico de las líneas de base y la cuadrícula de línea de base, y conoce algunas de las limitaciones del diseño de texto CSS frente a la impresión. También sabe cómo sortear esas limitaciones, redactar sus documentos con el ritmo vertical que desee y tiene una herramienta para ayudarlo a lidiar con el contenido de imágenes disruptivo.
A medida que CSS madura, continuamos obteniendo más funciones en línea con nuestros primos de impresión, por lo que una buena comprensión de la tipografía será más importante para crear sitios web de calidad. Si desea obtener más información sobre la tipografía en general, le recomiendo encarecidamente www.thinkingwithtype.com (y comprar el libro para acompañarlo). Si busca artículos de CSS sobre el tratamiento de tipos, hay numerosos artículos tanto aquí como en otras partes de la web. También recomendaría ponerse al día con lo último de Mark Boulton y Elliot Jay Stocks, quienes hablan a menudo sobre la tipografía en relación con el diseño web específicamente.
¡Divertirse!
