Cómo evitamos que el texto se desplace cuando aparecen los símbolos

Cuando movía el cursor para editar una lista, el texto se desplazaba hacia un lado. Cuando el cursor salía, volvía a su sitio.

Aunque solo se movía una línea, parecía que temblaba todo el párrafo. Esa pequeña diferencia interrumpía constantemente el flujo de edición.

La causa era el ancho del marcador.

Normalmente, en la pantalla se ve una viñeta redonda. Sin embargo, en el archivo se guardan un guion y un espacio. Cuando el cursor toca el marcador, hay que mostrar el texto original para poder editarlo directamente.

El problema es que las dos formas ocupan anchos distintos. La viñeta es una caja con un ancho fijo, pero el ancho del guion y el espacio varía según la fuente. En mote, esa diferencia era de 4.9 px. Cada vez que aparecía el texto original, el texto situado detrás se desplazaba esa distancia.

Desplazamos la línea tanto como la diferencia de ancho

No hicimos que ambos anchos fueran iguales. En su lugar, compensamos la diferencia.

En el momento en que el marcador cambia al texto original, desplazamos toda la línea en la dirección contraria una distancia equivalente a la diferencia de ancho. Aunque cambie la forma del símbolo, el texto comienza en el mismo lugar.

No tocamos el archivo. La viñeta es un adorno dibujado sobre el guion, y la compensación solo cambia la posición en la que se dibuja la línea en la pantalla. Aunque el cursor entre y salga, el contenido guardado permanece intacto.

También unificamos el criterio utilizado para calcular el ancho. Antes, había cifras distintas en el lugar donde se dibujaba el marcador y en el lugar donde se compensaba la línea. La pequeña diferencia entre ambos valores era precisamente esos 4.9 px.

Ahora ambos lugares consultan el ancho del marcador a la misma función. Como solo hay un criterio, tampoco pueden desajustarse.

Sin embargo, si no hay suficiente margen izquierdo, no aplicamos la compensación. Esto se debe a que, al desplazar la línea, el texto podría quedar cortado fuera de la ventana. Que desaparezca el texto es un problema mayor que el temblor.

Dejamos que los títulos y las citas se desplazaran

Al principio aplicamos el mismo método a los títulos y las citas.

Pero el # de los títulos y el > de las citas tienen un ancho de 0 en la pantalla normal. Para mantener fijo el texto, había que sacar los símbolos al margen izquierdo.

Técnicamente funcionaba bien. El texto no se movía. Pero la pantalla resultaba extraña. No parecía natural que el símbolo flotara por separado en el margen.

Así que lo revertimos. Ahora, cuando aparecen los símbolos de los títulos y las citas, el texto se desplaza hacia la derecha.

Al final elegimos una respuesta distinta para cada marcador.

Los marcadores que tienen una caja en la pantalla, como las viñetas y las casillas de tareas, mantienen fijo el texto. Los marcadores cuyo ancho habitual es 0, como los títulos y las citas, desplazan el texto.

Una pantalla natural era más importante que una única regla.

Mostramos los símbolos solo cuando son necesarios

La mejor manera de reducir el temblor es reducir los propios momentos en los que cambia el símbolo.

Ahora, el símbolo de la viñeta solo se muestra como texto original cuando el cursor está sobre él. Cuando el cursor pasa por el espacio y se desplaza al texto, vuelve inmediatamente a convertirse en una viñeta. No es necesario seguir viendo el guion mientras se edita el contenido de la lista.

La alineación también se mantiene cuando una línea se alarga y continúa en la siguiente. Incluso mientras el marcador se muestra como texto original, la segunda línea comienza debajo del texto de la primera.

También corregimos un problema por el que un clic se interpretaba erróneamente como un arrastre. Cuando el puntero temblaba un poco justo en el momento en que cambiaba el marcador, a veces se seleccionaba el texto. Ahora el puntero debe moverse más de 8 px para que se considere un arrastre.

Lo comprobamos con números, no con los ojos

Este tipo de diferencias es difícil de comprobar únicamente a simple vista. Al observarlas brevemente pueden parecer aceptables, pero con un uso prolongado resultan molestas.

Por eso creamos una prueba que ejecuta la aplicación real. Movemos el cursor dentro y fuera del marcador y comparamos directamente la coordenada x en la que comienza el texto. Los dos valores deben ser iguales para que la prueba se supere.

Comprobamos del mismo modo las viñetas, las casillas de tareas y las listas anidadas.

Es difícil que un desajuste de un solo píxel se reporte como un error. En lugar de explicar qué se ha movido, el usuario simplemente siente que «por algún motivo, distrae».

Por eso estos movimientos deben vigilarlos los números, no las personas.

Una pantalla tranquila no es una pantalla en la que no ocurre nada. Es una pantalla en la que los cambios necesarios ocurren donde no molestan a la vista.