Estilos de subtítulos personalizados

Escribe tu propio CSS para los subtítulos de vídeo: difumina la traducción, atenúa el original o rediseña la caja de subtítulos.

La página de estilo de subtítulos cubre fuente, escala, grosor, color y opacidad del fondo. El CSS personalizado se ocupa de todo lo que esos controles no alcanzan: tapar la traducción con un desenfoque hasta que de verdad la necesites, subrayarla, dejar el original en segundo plano o cambiar la forma de la caja.

Solo se aplica a la capa de subtítulos de Read Frog. La traducción de páginas web tiene su propia hoja de estilos aparte: consulta Estilos de traducción personalizados.

Abrir el editor

Abre Opciones → Subtítulos de video.
Entra en Estilo de subtítulos con Personalizar estilo.
Baja hasta CSS personalizado y ábrelo.
Escribe tu CSS. La vista previa sobre el editor se actualiza mientras escribes.
Pulsa Guardar.

Al guardar, el cambio llega a los reproductores que ya están abiertos, así que puedes dejar un vídeo en otra pestaña y ver el efecto de cada guardado. Si vacías el editor y guardas otra vez, el CSS desaparece y los subtítulos vuelven a los controles de arriba.

Empezar con una plantilla predefinida

El desplegable Plantilla predefinida trae tres bloques listos para usar. Al elegir uno se añade al final del editor en lugar de sustituir lo que ya hay, así que las plantillas se acumulan: elige dos y difuminarás la traducción y atenuarás el original.

Difuminar traducción

Escucha primero y lee solo cuando te rindas. El desenfoque desaparece mientras el puntero está sobre la línea.

.subtitles-translation {
  filter: blur(6px);
  transition: filter 0.15s ease;
}

.subtitles-translation:hover {
  filter: none;
}

Traducción subrayada a trazos

Marca la traducción como una ayuda y no como el texto principal.

.subtitles-translation {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

Atenuar original

Mantiene disponible la línea original sin que la vista caiga antes en ella.

.subtitles-main {
  opacity: 0.6;
}

Selectores que puedes usar

La capa es deliberadamente pequeña. Estos tres nombres de clase forman parte del contrato y no cambiarán:

<div class="read-frog-subtitles-box">
  <div class="subtitles-main">Mr. Kamiya isn't confronting the world…</div>
  <div class="subtitles-translation" lang="zh" dir="ltr">神谷先生…</div>
</div>

Selector	A qué corresponde
`.read-frog-subtitles-box`	la caja que contiene ambas líneas: fondo, relleno, esquinas, ancho, alineación
`.subtitles-main`	la línea del subtítulo original
`.subtitles-translation`	la línea traducida

La línea de traducción lleva dos puntos de enganche adicionales:

lang y dir siguen tu idioma de destino, así que funcionan tanto .subtitles-translation[lang='ja'] como .subtitles-translation[dir='rtl'].
data-pending="true" se activa mientras la traducción sigue en camino.

.subtitles-translation[data-pending='true'] {
  opacity: 0.35;
}

En el DOM el original va siempre primero; Posición de la traducción solo intercambia las dos líneas visualmente con order. Usa los nombres de clase en lugar de :first-child.

Convivir con los controles de estilo

La fuente, la escala, el grosor y el color que eliges en la interfaz llegan a cada línea como variables CSS que una regla de hoja de estilos convierte en declaraciones. Tu CSS se inyecta después de esa regla, así que una declaración normal gana: no hace falta !important.

.subtitles-translation {
  color: #ffd479;
  font-weight: 600;
}

Conviene conocer dos excepciones antes de perder tiempo con ellas.

Define las propiedades, no las variables `--rf-subtitle-*`

Las variables detrás de esos cuatro controles se escriben en línea sobre cada línea, y una declaración en línea supera a cualquier regla de hoja de estilos. Escribir --rf-subtitle-color en tu CSS no hace nada:

/* Se ignora: la variable está definida en línea. */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* Funciona. */
.subtitles-main { color: #7cf; }

El fondo de la caja necesita `!important`

La opacidad del fondo se escribe en línea sobre la caja por el mismo motivo, y es el único sitio donde tu CSS tiene que insistir:

.read-frog-subtitles-box {
  background-color: rgba(24, 20, 48, 0.85) !important;
  border-radius: 10px;
  padding: 8px 14px;
}

Todo lo demás de la caja (relleno, esquinas, ancho, alineación) acepta una declaración normal.

Tamaños en `em`, no en `px`

El tamaño de fuente raíz de la capa se calcula a partir de la altura del vídeo; así los subtítulos mantienen la proporción en pantalla completa o en el reproductor pequeño. Un 1em en una línea significa «el tamaño que usaría el reproductor»; un tamaño en px se congela y deja de seguir al vídeo.

.subtitles-translation {
  font-size: 1.15em;
}

Más recetas

Perfilar el texto y quitar la caja

Va bien con imágenes claras, donde un fondo oscuro molesta más que los propios subtítulos.

.read-frog-subtitles-box {
  background-color: transparent !important;
}

.subtitles-main,
.subtitles-translation {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.9);
}

Que mande la traducción

Reduce la línea original a una referencia y da el peso a la traducción.

.subtitles-main {
  font-size: 0.75em;
  opacity: 0.65;
}

.subtitles-translation {
  font-size: 1.1em;
  font-weight: 600;
}

Alinear a la izquierda las líneas largas

Centrar cuesta de leer en cuanto un subtítulo ocupa tres líneas.

.read-frog-subtitles-box {
  max-width: 70%;
  text-align: left;
}

Tipografía por idioma

Útil si lees en más de un idioma de destino y quieres que cada uno se vea bien.

.subtitles-translation[lang='ja'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.subtitles-translation[dir='rtl'] {
  font-size: 1.05em;
}

Alcance y límites

La capa se dibuja dentro de un shadow root del reproductor. Esa frontera es la que impide que tu CSS se escape a la página, y también decide qué se queda en nada sin avisar:

Funciona y no sale de la capa: @keyframes, @media, @supports, transiciones, pseudoclases y las variables CSS que definas tú.
Se ignora: @font-face y @property. Un shadow root no puede registrar ninguno de los dos, así que elige fuentes ya disponibles en el sistema en lugar de cargar las tuyas.
No coincide con nada: :root y body. Dentro de la capa no hay ningún elemento a nivel de página: usa las tres clases de arriba.
Fuera de alcance: los controles del reproductor de YouTube, la página que hay detrás y los subtítulos nativos. Tu CSS no puede dar estilo a nada fuera de la capa de subtítulos.
Límite de tamaño: 8 KB. El editor revisa la sintaxis mientras escribes y bloquea Guardar si el CSS no es válido o es demasiado largo.

/* Las animaciones no dan problema y se quedan dentro. */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.subtitles-translation {
  animation: rf-fade-in 0.2s ease-out;
}

Resolución de problemas

No cambia nada al guardar: comprueba que el estado diga CSS válido y el botón Guardado, y luego que la regla apunte a uno de los tres nombres de clase.
Se ignora un color de fondo en la caja: añade !important. El control de opacidad escribe esa propiedad en línea.
Se ignora una sobrescritura de --rf-subtitle-*: define directamente color, font-size, font-family o font-weight.
El tamaño del texto salta en pantalla completa: cambia ese font-size de px a em.
Una fuente no se aplica nunca: @font-face no funciona dentro de la capa; usa una fuente instalada en el sistema.
Guardar está desactivado: el editor encontró un error de sintaxis o la hoja supera los 8 KB.
La capa se ve rota: vacía el editor y guarda. El CSS se retira al instante y los controles de estilo vuelven a mandar.

El CSS personalizado se guarda junto al resto de ajustes, así que viaja en una exportación de configuración: consulta Configuración, sincronización y copias. Para todo lo demás sobre la capa, consulta Subtítulos de vídeo.

Estilos de subtítulos personalizados

On this page