Communitygithub.com

vidmoat/caption-styling

Estiliza y temporiza subtítulos y leyendas para que se lean en un teléfono con el sonido apagado. Establece longitud de línea, velocidad de lectura, sincronización, tamaño, contraste y zonas seguras de la plataforma, y verifica archivos SRT o VTT. Útil cuando el usuario quiere añadir, reestilizar, arreglar o hacer accesibles subtítulos, dice que son demasiado rápidos, pequeños o están ocultos bajo botones de la app, o prepara vídeos para TikTok, Reels, Shorts o YouTube, incluso si solo pide «pon lo que digo en pantalla».

¿Qué es caption-styling?

Esta habilidad proporciona directrices y herramientas para crear subtítulos y leyendas optimizados para visualización en dispositivos móviles con sonido apagado, asegurando legibilidad rápida mediante reglas estrictas de formato, sincronización y diseño. Establece valores predeterminados como un máximo de 42 caracteres por línea en formato horizontal (32 en vertical), velocidad de lectura de 17 caracteres por segundo, duración de cada señal entre 1 y 6 segundos, y posicionamiento en la parte inferior central dentro de la zona segura de la plataforma. También incluye un script de verificación automatizada (`check_captions.py`) que comprueba limitaciones de línea, velocidad, duración y superposiciones en archivos SRT o VTT. La habilidad está diseñada para entornos de edición como Claude Code, Cursor o Codex, y proporciona recetas ffmpeg para incrustación de subtítulos, manejo de tiempos relativos a la fuente (restar tiempo de inicio del clip) y consejos sobre anchos estimados de tipografía que pueden fallar en fuentes condensadas. Su uso es esencial para cumplir con estándares de accesibilidad y garantizar que los subtítulos sean legibles en teléfonos, incluso bajo botones de aplicaciones como TikTok o Instagram.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vidmoat/skills/tree/HEAD/skills/core/caption-styling

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Estilizado de subtítulos

Un subtítulo se lee en aproximadamente dos segundos, en un teléfono, con el sonido apagado, sobre imágenes en movimiento, debajo de botones de aplicaciones. Cada valor predeterminado que aparece a continuación sirve a ese lector. Trabaje en el editor del usuario si tiene uno; los números son los mismos en todas partes. Cuando no haya editor, use las recetas de ffmpeg en references/ffmpeg-burn-in.md.

Valores predeterminados

Use estos a menos que el usuario o su guía de estilo indiquen lo contrario.

ConfiguraciónPredeterminadoPor qué
Líneas por señal2 como máximoUna tercera línea cubre el sujeto y no se lee a tiempo.
Caracteres por línea42 en horizontal 16:9; en vertical 9:16, lo que quepa en el ancho seguro a tu tamaño: alrededor de 32 a 64 px, 28 a 72 px (mayúsculas y minúsculas)Las líneas más largas fuerzan el movimiento ocular y en vertical se salen del encuadre.
Velocidad de lectura17 caracteres por segundo como máximo (aproximadamente 160 a 180 palabras por minuto)Práctica de radiodifusión; WCAG no establece velocidad, por lo que este es el estándar de trabajo.
Duración de la señalMínimo 1 s, máximo 6 sMenos de 1 s es un parpadeo; más de 6 s los espectadores releen.
Espacio entre señales0 o al menos 2 fotogramasUn espacio de 1 fotograma se percibe como un destello.
PosiciónCentro inferior, dentro de la zona segura; en 1080x1920, el texto permanece por encima de los 420 px inferiores (22% de la altura)Esto evita tanto TikTok como Reels. Muévase a la parte superior cuando el tercio inferior contenga una cara, texto incrustado o interfaz de aplicación.
Tamaño, subtítulos de oracionesHorizontal: 4.5 a 5 % de la altura del fotograma (49 a 54 px en 1080p). Vertical: 64 a 72 px en 1080x1920Legible a la distancia del brazo, y las longitudes de línea anteriores aún caben en el ancho seguro de 900 px.
Tamaño, subtítulos cortos llamativos (1 a 3 palabras)Aproximadamente 140 a 150 px en 1080x1920, como máximo unos 14 caracteres por línea en mayúsculas y minúsculas, 11 en mayúsculasEstos son elementos gráficos, no subtítulos.

| Color | Blanco roto #F2F2F2 sobre una placa oscura de 70 a 80 % de opacidad, o un contorno oscuro de 3 a 5 px más una sombra suave | El contraste sobre imágenes en movimiento no se puede medir fotograma a fotograma; una placa garantiza WCAG 4.5:1. | | Fuentes | Una sans-serif pesada (negrita o seminegrita); nunca más de dos familias en un vídeo | Los pesos finos desaparecen después de la compresión. | | Resalte de palabra (karaoke) | Un color de acento solo en la palabra activa, y debe cumplir 4.5:1 también | Un segundo color para «énfasis» hace que los espectadores busquen el significado. |

Verificación de ajuste antes de renderizar. Una sans-serif negrita tipo Arial en mayúsculas y minúsculas promedia 0.44 del tamaño de fuente por carácter (medido, incluidos espacios); todo mayúsculas promedia 0.55; las fuentes condensadas alrededor de 0.35. Por lo tanto, una línea mide aproximadamente caracteres x factor x px_fuente de ancho, y debe caber en el ancho seguro (900 px en 1080x1920, 90 % del ancho en horizontal), no en el fotograma. A 96 px, una línea de 27 caracteres en mayúsculas y minúsculas mide aproximadamente 27 x 0.44 x 96 = 1,140 px: más ancha que todo el fotograma de 1080 px. Los factores son promedios para las fuentes en las que se midieron (consulte Problemas), así que confirme con un fotograma renderizado.

Las zonas seguras de píxeles de la plataforma y cómo derivar la caja segura para cualquier lienzo están en references/platform-safe-zones.md. Léalo antes de colocar subtítulos en vídeo vertical.

Flujo de trabajo

  1. Comience desde tiempos reales. Los subtítulos necesitan una transcripción con tiempos de segmentos o palabras. Sin transcripción no hay subtítulos que hacer: dígalo, o transcriba primero. Nunca invente redacción.

  2. Reajuste los tiempos a la edición. Las transcripciones se sincronizan con el archivo fuente. Después de recortar, cortar o cambiar la velocidad, desplace y escale cada señal al cronograma (consulte Problemas).

  3. Segmentar en señales. Divida en límites de cláusula: después de puntuación, antes de conjunciones y preposiciones. Nunca separe un artículo de su sustantivo, un nombre de pila de un apellido, ni un número de su unidad. De dos posibles roturas, elija la que haga que las dos líneas tengan la longitud más similar.

  4. Aplique la velocidad de lectura. Una señal de más de 17 caracteres por segundo se divide o se extiende hacia el silencio posterior. Nunca reduzca el tipo para que quepa.

  5. Marque hablantes y sonido. Al cambiar de hablante, comience la línea con - (o nombre entre corchetes la primera vez). Coloque sonidos no verbales significativos entre corchetes: [portazo], [música tensa]. No subtitule palabras de relleno que se hayan eliminado del audio.

  6. Estilice y coloque usando los valores predeterminados y la caja segura para este lienzo.

  7. Verifique el archivo, luego corrija cada error que informe:

    python scripts/check_captions.py subtitulos.srt --fps 30 --max-chars 32
    

    Comprueba el número de líneas, la longitud de líneas, los caracteres por segundo, la duración, los espacios y las superposiciones, y sale con código distinto de cero en caso de errores. Añada --json para un informe legible por máquina. Su límite de línea predeterminado es de 32 caracteres, la cifra para vertical y accesibilidad; pase --max-chars 42 para subtítulos en horizontal.

  8. Observe fotogramas renderizados, no configuraciones: la primera señal, la más larga y una sobre el fondo más ocupado. Confirme que nada esté recortado, que nada quede bajo la interfaz de la aplicación y que el texto sea legible al tamaño de un teléfono.

  9. Entregue tanto una versión incrustada para redes sociales como un archivo .srt o .vtt adjunto para accesibilidad y carga en la plataforma, a menos que el usuario haya solicitado solo uno.

Problemas

  • Las estimaciones de ancho fallan en fuentes condensadas. Las estimaciones promedio de ancho de glifo han fallado por más de 3 veces: una verificación de desbordamiento informó una línea que se salía 127 px por cada lado cuando realmente se renderizaba a 270 px de ancho en un fotograma de 1080 px. Reducir el tipo para cumplir con esa estimación produjo subtítulos de 76 px en 1080x1920 donde el estilo llamativo requería alrededor de 150 px, demasiado pequeños para leer en un teléfono. Renderice un fotograma y mida.
  • Los tiempos de transcripción son relativos a la fuente. Si un clip comienza 12.4 s después de su fuente, reste 12.4 s de cada señal y añada el inicio del clip en la línea de tiempo. A 2x de velocidad, las duraciones se reducen a la mitad, por lo que las señales pueden caer por debajo de 1 s; vuelva a segmentar en lugar de mantener los límites de señal anteriores.
  • ffmpeg incrusta SRT en una cuadrícula de 288 líneas, no en píxeles. Con subtitles=archivo.srt:force_style=..., FontSize y MarginV se miden en un guión de 384x288, por lo que FontSize=24 se renderiza como una fuente de 90 px en vídeo de 1080 líneas y 160 px en vídeo de 1920 líneas. Convierta con FontSize = px * 288 / altura_fotograma, o escriba un archivo ASS cuyo PlayResX y PlayResY igualen el tamaño del vídeo para que las unidades sean píxeles (la receta lo hace).
  • Una placa en ASS toma OutlineColour. Con BorderStyle=3 el color de la caja proviene de OutlineColour, no de BackColour, y los colores ASS son &HAABBGGRR donde alfa 00 es opaco. &H40000000 es negro al 75 % de opacidad.
  • Los cambios de color en línea rompen una placa ASS. Un resaltado {\c...} dentro de una línea BorderStyle=3 dibuja una caja separada por cada ejecución de color, y las cajas semitransparentes se superponen formando costuras oscuras. Dibuje la placa como su propia capa con texto invisible y coloque el texto visible en una capa superior (la receta muestra cómo).
  • Las fuentes faltantes fallan silenciosamente. libass recurre a otra fuente sin error. Verifique la línea fontselect: en el registro de ffmpeg, o pase fontsdir=.
  • Las rutas de Windows rompen el filtro de subtítulos. Escape los dos puntos de la unidad: subtitles='C\:/clips/subs.srt'.
  • Las letras cantadas se sincronizan por frases. El reconocimiento de voz con música pierde palabras (una prueba perdió 4 de 17) y devuelve tiempos de frases, no tiempos de palabras. No construya karaoke palabra por palabra a partir de ello sin verificar contra el audio.
  • Un preajuste puede colorear la palabra activa en más de un lugar. Un preajuste neón de un editor dibujaba el resaltado tanto desde un color de resaltado como desde un brillo, por lo que sobrescribir solo un campo que no existe no cambió nada, sin error. Sobrescriba cada campo que lleve el color, por su nombre real, y confirme en un fotograma renderizado.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Skills relacionados