¿Cómo centrar una etiqueta de texto sin mucho movimiento cuando cambia?

Tengo un bloque de texto que necesito centrar horizontalmente, sin embargo, cuando cambia, se mueve un poco y no me gusta mucho. Un contador similar en la aplicación de cuenta regresiva para iPhone de alguna manera logra evitar este problema. ¿Cómo sugeriría manejarlo? Supongo que se puede resolver con otra fuente, pero me gusta la actual y me pregunto si hay otros enfoques de diseño para cosas como esa.

ingrese la descripción de la imagen aquí

¿Es parte de alguna aplicación de iOS?
Puede usar una fuente monoespaciada (al menos para los caracteres numéricos) o más "manualmente" arreglar los dos puntos en su lugar (el otro espacio podría decirse que estaría desactivado en ese caso). Otra opción es animar el cambio de posición para que se note menos.

Respuestas (2)

Hay dos opciones para esto.

O usa una fuente monoespaciada (o incluso algunas fuentes no mono tienen números tabulares que resuelven este problema)

La otra opción es hacer que aparezca alineado en el centro aunque técnicamente no lo esté. Entonces podría tener el ":" en una posición fija, el "1" alineado a la derecha y el "41" alineado a la izquierda. Esto, por supuesto, es bastante difícil de hacer si desea codificar esto de manera receptiva ...

¿Por qué sería esto difícil de codificar? ¿Quiere decir que la API no tiene forma de consultar el ancho del texto?
@joojaa Si tienes un ancho fijo, es fácil. Pero con el ancho flexible podría ser un poco más complicado, aunque tampoco es ciencia espacial. Básicamente, necesita 3 div con anchos fijos y una envoltura centrada. La parte difícil es asegurarse de que el texto nunca se desborde y los espacios permanezcan equilibrados, etc.
Hay muchas cosas que podrían romper esto... – Las consultas de medios de tamaño de fuente deben tenerse en cuenta – ¿Qué pasa cuando el usuario hace zoom? Cambios posteriores en el tamaño de fuente, etc.
Todo se rompe si lo empujas lo suficiente.

Esto se llama revestimiento tabular . Es donde todos los números ocupan el mismo espacio, independientemente del tamaño de sus glifos, similar a cómo actuaría una fuente monoespaciada.

En css puede usar font-variant-numeric: tabular-nums;Sin embargo, es posible que no funcione en todas las fuentes, creo que requiere el formato OpenType y requiere que el creador de la fuente agregue la funcionalidad.

Si alineó correctamente el tipo y pudo establecer esa propiedad css, debería comportarse como usted quisiera.

Mozilla: "tabular-nums que activa el conjunto de cifras donde los números son todos del mismo tamaño, lo que permite alinearlos fácilmente como en las tablas. Corresponde a los valores de OpenType tnum".

Más aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

Ejemplo visual:ingrese la descripción de la imagen aquí

¿Cómo centrar una etiqueta de texto sin mucho movimiento cuando cambia?
RespuestasAquíPolítica de privacidad1y, 0v