Visor de bytes UTF-8

Acerca de Visor de bytes UTF-8

La herramienta divide el texto en puntos de código y pasa cada uno por el TextEncoder del navegador, mostrando al lado del número U+ los bytes que ocupa en UTF-8. «Número de caracteres» puede significar al menos tres cosas: puntos de código, unidades de código UTF-16 o lo que una persona percibe como una sola letra. Aquí se cuentan puntos de código y los bytes son siempre UTF-8.

Sirve sobre todo cuando un sistema rechaza un texto por largo aunque parezca corto: una columna de base de datos, un campo de API limitado en bytes, un nombre de archivo o una notificación push. Ver los bytes suele explicar la diferencia enseguida.

Un carácter, tres longitudes

Unicode asigna a cada carácter un número (su punto de código); la codificación decide cómo se escribe ese número en bytes. UTF-8 usa de uno a cuatro bytes; UTF-16, una o dos unidades de 16 bits. str.length en JavaScript, String.length() en Java y string.Length en C# devuelven unidades UTF-16, por eso no coinciden con esta herramienta cuando hay emojis.

• A (U+0041): UTF-8 41, 1 byte; UTF-16 1 unidad
• ñ (U+00F1): UTF-8 C3 B1, 2 bytes; UTF-16 1 unidad
• € (U+20AC): UTF-8 E2 82 AC, 3 bytes; UTF-16 1 unidad
• 😀 (U+1F600): UTF-8 F0 9F 98 80, 4 bytes; UTF-16 2 unidades (D83D DE00)

Descifrar los bytes a mano

El RFC 3629 define UTF-8 con plantillas de bits según el rango: U+0000–007F cabe en 0xxxxxxx; U+0080–07FF usa 110xxxxx 10xxxxxx; U+0800–FFFF usa 1110xxxx 10xxxxxx 10xxxxxx; y U+10000–10FFFF usa 11110xxx seguido de tres bytes de continuación.

La ñ es U+00F1, en binario 000 1111 0001. Se reparten los 11 bits en 5 + 6 (00011 y 110001) y en la plantilla de dos bytes queda 11000011 10110001, es decir C3 B1. El símbolo del euro, U+20AC, necesita la plantilla de tres bytes y sale E2 82 AC.

De aquí salen dos propiedades útiles. Los unos iniciales del primer byte indican la longitud de la secuencia y todo byte de continuación empieza por 10, de modo que desde cualquier punto del flujo se encuentra el siguiente límite de carácter. Y ningún byte menor que 0x80 forma parte de otro carácter: siempre es ASCII puro.

Cuando un carácter visible ocupa varias filas

La herramienta crea una fila por punto de código. Si algo que parece una sola letra da varias filas, ahí suele estar el problema.

• Emoji de familia 👨‍👩‍👧: hombre, ZWJ (U+200D), mujer, ZWJ, niña — cinco puntos de código, 18 bytes. Cada ZWJ es E2 80 8D.
• Pulgar con tono de piel 👍🏽: U+1F44D más el modificador U+1F3FD, 8 bytes.
• ñ en dos filas: n (U+006E) + TILDE COMBINANTE (U+0303, bytes CC 83). Se ve igual que C3 B1, pero la comparación falla hasta normalizar ambas cadenas a la misma forma (NFC o NFD). Es habitual en nombres de archivo creados en macOS: «España.pdf» puede no encontrarse al buscar «España» escrito con teclado.
• Una á del mismo modo puede ser C3 A1 o 61 CC 81.

Dónde muerde el límite entre 3 y 4 bytes

El antiguo juego utf8 de MySQL (hoy llamado utf8mb3) guarda como máximo tres bytes por carácter, así que los caracteres de cuatro bytes —casi todos los emojis— dan error o se truncan. La solución es utf8mb4. VARCHAR(n) cuenta caracteres, pero los límites de índice se miden en bytes.

Cortar por bytes es el otro error clásico. Si una cadena con acentos se corta en un byte arbitrario, se puede separar C3 de su A1; el byte huérfano es inválido y aparece como U+FFFD (�). Con los totales acumulados de esta herramienta se ve dónde cortar sin romper nada.

Encontrar caracteres invisibles

El espacio se muestra como ␣, el tabulador y los saltos como \t, \n y \r, y los demás controles como \x1B. Los espacios Unicode que parecerían vacíos también llevan etiqueta: U+00A0 ESPACIO DE NO SEPARACIÓN (C2 A0) aparece como [NBSP], U+200B ESPACIO DE ANCHO CERO (E2 80 8B) como [ZWSP], U+FEFF, la marca de orden de bytes (EF BB BF), como [BOM] y U+3000 ESPACIO IDEOGRÁFICO (E3 80 80) como [IDSP]; ZWJ, ZWNJ, WJ y el guion suave se etiquetan igual. Si un valor pegado no coincide en una búsqueda o en un BUSCARV, busque [NBSP], [ZWSP] o [BOM].

Ejemplos

Cómo se usa

1. Escriba o pegue el texto.
2. Lea cada fila: carácter, punto de código U+ y bytes UTF-8.
3. Consulte arriba los totales de puntos de código y bytes.
4. Copie el volcado hexadecimal si necesita compararlo con otro sistema.

Términos clave

Punto de código

Número que Unicode asigna a un carácter, de U+0000 a U+10FFFF.

Unidad de código

Unidad mínima de una codificación: un byte en UTF-8, dos en UTF-16.

Par sustituto

Dos unidades UTF-16 (D800–DBFF y DC00–DFFF) que juntas representan un punto de código mayor que U+FFFF.

NFC / NFD

Formas de normalización: compuesta (ñ como un punto de código) o descompuesta (n + tilde combinante).

Preguntas frecuentes

Guías relacionadas

• Unicode y UTF-8: por qué «España» acaba como «España» y cómo se arregla