Si escribes un blog en dos idiomas, conoces el problema. El texto del artículo se traduce en un rato. Las imágenes no. La portada lleva un titular, el diagrama lleva etiquetas, la captura lleva una flecha con una nota. Y todo eso está pintado en los píxeles. Para la versión en inglés hay que abrir el diseño, cambiar las palabras, exportar otra vez y subir otro archivo. Multiplica eso por cada imagen y cada idioma.
Este blog funciona de otra manera. Cada artículo está escrito en Markdown, y cada imagen es un único archivo .oim que sirve a las dos versiones. Este artículo explica cómo, con una sola línea.
Markdown, en dos palabras
Markdown es una forma de escribir texto con formato usando signos sencillos. Un # delante de una línea la convierte en titular. Dos asteriscos alrededor de una palabra la ponen en negrita. Un guion al principio de la línea crea una lista.
Lo usan GitHub, la mayoría de gestores de documentación y muchos blogs, porque se lee bien incluso sin convertir y porque separa lo que dices de cómo se ve.
Para las imágenes, Markdown tiene su propia sintaxis: . Funciona, pero trata la imagen como un bloque cerrado. No sabe nada de idiomas.
Una línea para una imagen viva
En este blog añadimos una directiva propia. Una directiva es una extensión de Markdown que empieza por dos puntos dobles:
::oim{src="https://embed.oim.media/blog/portada.oim.png" ratio="16/9"}
srces la dirección del archivo.oim.ratioes su proporción, para que la página reserve el hueco antes de que cargue y nada salte al leer.
Al publicar, esa línea se convierte en un reproductor de OIM con la imagen dentro. Y aquí está la clave: el reproductor recibe también el idioma del artículo. Si estás leyendo la versión en español, pinta los textos en español. Si abres la versión en inglés, pinta los mismos textos en inglés. El archivo es el mismo.
La portada de este artículo es un ejemplo. Cambia el idioma con el selector de arriba y verás que el titular cambia, pero la dirección de la imagen no.
Por qué funciona
Un .oim no guarda el texto aplastado contra la foto. Guarda la imagen base por un lado y, por otro, cada texto en todos sus idiomas. Lo explicamos con más detalle en Qué es un .oim y en Imágenes multilingües.
Eso tiene consecuencias prácticas para quien escribe:
- Un archivo por imagen, no uno por idioma. El Markdown en español y el Markdown en inglés llevan exactamente la misma línea
::oim. - Corregir una errata es corregirla una vez. Cambias el texto en el editor, exportas y las dos versiones quedan al día.
- El texto sigue siendo texto. Se puede seleccionar, lo leen los lectores de pantalla y se ve nítido a cualquier tamaño.
- Si el reproductor no carga, sigue habiendo imagen. Un
.oimes un PNG válido.
Un ejemplo completo
Así es el arranque de un artículo en español:
Este trimestre crecimos en tres mercados.
::oim{src="https://embed.oim.media/blog/ventas-t3.oim.png" ratio="16/9"}
El gráfico muestra las ventas por región.
Y así el mismo arranque en inglés:
This quarter we grew in three markets.
::oim{src="https://embed.oim.media/blog/ventas-t3.oim.png" ratio="16/9"}
The chart shows sales by region.
El párrafo se traduce, la línea de la imagen no. Las etiquetas del gráfico, «Norte», «Sur», «Ventas», aparecerán en español en el primero y como «North», «South», «Sales» en el segundo, porque las dos traducciones viven dentro del archivo.
Y las imágenes normales
No todo tiene que ser un .oim. Para una foto sin texto usamos otra directiva:
::image{src="https://embed.oim.media/blog/foto.webp" alt="Mesa de trabajo con bocetos"}
Aquí el texto alternativo (alt) sí se escribe en cada idioma, porque forma parte del Markdown de cada versión. La regla práctica: si la imagen tiene palabras dentro, .oim. Si es solo una foto, ::image.
Cómo preparamos las imágenes
Las imágenes de este blog se diseñan en el editor de OIM, con cada texto escrito en español y en inglés. Al exportar al blog, la herramienta devuelve la línea ::oim ya escrita, lista para pegar en el artículo. No hay que copiar direcciones a mano.
Si escribes tu propio sitio, el mismo principio vale fuera de este blog: el reproductor de OIM acepta un atributo lang, y cómo incrustarlo se explica en su propio artículo.
Preguntas frecuentes
¿Necesito una imagen distinta para cada idioma?
No. Un solo archivo .oim guarda los textos de todos sus idiomas, y el reproductor muestra el que corresponde al artículo.
¿Qué pasa si un idioma no está traducido dentro de la imagen?
Si falta un texto en el idioma del lector, el reproductor recurre al inglés, luego al español y, después, al primer idioma disponible. Por eso conviene escribir cada texto en todos los idiomas del blog antes de exportar.
¿Puedo usar la sintaxis normal de Markdown para un .oim?
Se verá como un PNG estático, sin textos vivos ni animaciones. Para que la imagen hable el idioma del lector hay que usar ::oim.
¿Afecta al posicionamiento en Google?
El artículo se sirve ya renderizado, con su texto, y la imagen reserva su hueco con ratio, así que la página no salta al cargar.
Escribe el artículo dos veces si hace falta. La imagen, una sola.