El diseño medido utilizando el enfoque de cuadrícula de referencia tendría números de espaciado aparentemente aleatorios cuando los desarrolladores usan herramientas de revisión (InVision/Zeplin/Figma) para inspeccionar el diseño. El siguiente diseño se creó utilizando la cuadrícula de referencia. Los números muestran lo que obtendría con una herramienta de revisión:
Mencioné brevemente el artículo anterior sobre el espacio en los sistemas de diseño. Habla sobre cómo se pueden representar los valores de espaciado mediante clases CSS, lo que ayuda a imponer la coherencia tanto para los diseñadores como para los desarrolladores. Desafortunadamente, al utilizar el enfoque de cuadrícula de referencia, es casi imposible representar los números de espaciado como un conjunto de clases CSS debido a la aleatoriedad que conlleva las diferentes combinaciones de tipos.
También analizamos una técnica popular que muchas personas propusieron para mitigar el problema de aleatoriedad, que consiste en utilizar pseudoelementos CSS ::before y ::after para “recortar” el cuadro delimitador (que básicamente consiste en aplicar un espaciado correccional al cuadro de línea). ). Sin embargo, mi novio ninja codificado, Chris Caruso, me dijo:
El uso de pseudoelementos CSS ::before y ::after no es ideal porque no es consistente entre diferentes fuentes, navegadores, sistemas operativos e incluso resoluciones de pantalla. Apuntar a una sola combinación puede generar problemas de espaciamiento en otras. Desde la perspectiva del desarrollador, la técnica no sigue buenas prácticas de codificación porque utiliza márgenes negativos y aplica elementos extraños al DOM, lo cual puede provocar efectos secundarios no deseados. Por lo tanto, en aplicaciones de producción no vale la pena correr el riesgo de esta técnica. 😑
Una vez hice un estudio de localización y observé 8 escrituras (latín, chino, cirílico, devanagari, griego, hangul, kana y tailandés) que admite nuestro producto. Luego me di cuenta de que no importa qué método de medición utilices, al final del día, es el espacio del cuadro delimitador lo que el desarrollador toma de la herramienta de revisión y coloca en CSS. Dependiendo de la fuente que utilice para otros idiomas distintos del inglés, incluso si la altura de la línea es la misma, la altura visual del tipo puede ser más alta o más pequeña que las letras latinas. Sus líneas de base también pueden cambiar. Por lo tanto, no importa qué método de medición utilice, la localización siempre cambiará un poco el espaciado. Sin embargo, como se muestra en el siguiente ejemplo, el texto de todos los idiomas permaneció relativamente centrado en el espacio en blanco a pesar de esos cambios menores.
(Todavía no sé mucho sobre escritura no latina, pero quiero aprender más. Avíseme si alguna de las observaciones realizadas anteriormente no es correcta o puede mejorarse. Solo sé inglés y chino. Un saludo a mis amigos del trabajo que me ayudaron a traducir esta línea a otros idiomas!)