Estilos de traducción personalizados

Descripción general

Read Frog le permite personalizar cómo aparecen las traducciones en las páginas web usando sus propios estilos CSS. Esto le brinda control total sobre colores, fondos, bordes, animaciones y más.

Puede aplicar estilos globalmente a todas las traducciones o dirigirse a idiomas e instrucciones de texto específicos. Por ejemplo, puede utilizar diferentes fuentes para las traducciones al chino, japonés y coreano, o ajustar el diseño para idiomas que se escriben de derecha a izquierda, como el árabe y el hebreo.

Habilitación de CSS personalizado

Abra la configuración de Read Frog
Vaya a Traducción → Estilo de visualización de traducción
Activa "Usar estilo personalizado"
El editor CSS aparecerá con una plantilla predeterminada

CSS Selectores

Selector básico

Todos los estilos personalizados deben apuntar al selector específico:

[data-read-frog-custom-translation-style='custom'] {
  /* Your styles here */
}

Este selector se aplica a todos los elementos de texto traducidos de la página.

Selector de envoltura

El contenido traducido se empaqueta en un contenedor con atributos de idioma y dirección:

<span class="read-frog-translated-content-wrapper" lang="zh" dir="ltr">
  <span data-read-frog-custom-translation-style="custom">神谷先生...</span>
</span>

Puede orientar sus anuncios a idiomas o direcciones específicos:

/* Target Chinese translations */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for Chinese */
}

/* Target RTL languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  /* Styles for right-to-left text */
}

Funciones del editor

Resaltado de sintaxis

El editor utiliza CodeMirror 6, proporcionando:

Sintaxis CSS codificada por colores
Números de línea
Plegado de código para hojas de estilo grandes
Sangría automática

Selector de color

Haga clic en cualquier valor de color en el editor para abrir un selector de color interactivo:

Haga clic en valores de color como #FF5733, rgb(255, 87, 51) o hsl(9, 100%, 60%)
El selector visual aparece instantáneamente
Ajustar usando controles deslizantes o campos de entrada
Actualización de cambios en tiempo real.

Formatos de color admitidos:

Hexadecimal: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
Colores con nombre: tomato, skyblue, gold
CSS variables: var(--my-color)

Validación en vivo

El editor valida su CSS antes de guardar:

Válido (verde): CSS es sintácticamente correcto, está listo para guardar
Validando (gris): comprobando tus cambios (rebote de 500 ms)
Error (rojo): error de sintaxis detectado con mensaje de error

Comprobaciones de validación:

Errores de sintaxis (errores tipográficos, faltan corchetes)
Validez del nombre de la propiedad
Corrección del selector
Límites de tamaño (8 KB como máximo)

Ejemplos básicos de CSS

importar desde '@/components/css-style-preview'

Color de fuente sencillo

[data-read-frog-custom-translation-style='custom'] {
  color: blue;
}

Con Borde

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: #F2E3BC;
  padding: 2px 4px;
  border-radius: 4px;
  border-left: 3px solid #FFD700;
}

Modo de estudio audaz

[data-read-frog-custom-translation-style='custom'] {
  background-color: #FFF59D;
  color: #000;
  font-weight: 600;
  border: 2px solid #FFD54F;
  padding: 6px 10px;
  border-radius: 4px;
}

Técnicas Avanzadas

Fuentes personalizadas

Cambiar la fuente para todas las traducciones:

[data-read-frog-custom-translation-style='custom'] {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  color: #2c3e50;
}

Estilo específico del idioma

Traduzca traducciones en idiomas específicos utilizando el atributo lang del contenedor:

/* Chinese translations with traditional serif font */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "华文楷体", serif;
  color: #8B4513;
}

/* Japanese translations */
.read-frog-translated-content-wrapper[lang='ja'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* Korean translations */
.read-frog-translated-content-wrapper[lang='ko'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Nanum Myeongjo", "Batang", serif;
}

Estilo de dirección específica

Traducciones de estilo basadas en la dirección del texto (útil para idiomas RTL como árabe, hebreo):

/* Right-to-left languages */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  border-right: 3px solid #9C27B0;
  border-left: none;
  padding-right: 10px;
  font-family: "Traditional Arabic", "Arial", sans-serif;
  font-size: 15px;
}

/* Left-to-right languages */
.read-frog-translated-content-wrapper[dir='ltr'] [data-read-frog-custom-translation-style='custom'] {
  border-left: 3px solid #2196F3;
  padding-left: 10px;
}

CSS Variables

Definir valores reutilizables:

[data-read-frog-custom-translation-style='custom'] {
  --highlight-color: #FFE082;
  --border-color: #FFA726;

  background-color: var(--highlight-color);
  border-left: 4px solid var(--border-color);
  padding: 4px 10px;
}

Soporte de modo Light/Dark

Utilice la función light-dark() para la adaptación automática del tema:

[data-read-frog-custom-translation-style='custom'] {
  background-color: light-dark(#FFF9C4, #4A4A2A);
  color: light-dark(#333, #E0E0E0);
  border: 1px solid light-dark(#FFD54F, #8D7B3A);
  padding: 5px 10px;
  border-radius: 4px;
}

Efectos de desplazamiento

[data-read-frog-custom-translation-style='custom'] {
  color: #0277BD;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}
[data-read-frog-custom-translation-style='custom']:hover {
  color: #01579B;
  transform: translateX(2px);
}

animaciones

[data-read-frog-custom-translation-style="custom"] {
  background: linear-gradient(90deg, #1fe5e1 0%, #a855f7 50%, #0ad6ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 2s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

Mejores prácticas

Qué hacer ✅

Comience con estilos simples y agregue complejidad gradualmente
Pruebe en varios sitios web
Utilice fondos de baja opacidad para mantener la legibilidad
Incluir unidades para valores de longitud: padding: 10px no padding: 10
Utilice códigos hexadecimales completos: #FF5733 no #FF

No hacer ❌

Evite !important (la especificidad del selector ya es alta)
No escriba estilos demasiado complejos (céntrese en las propiedades esenciales)
No excedas el límite de tamaño de 8 KB
Evite unidades faltantes o códigos de color incompletos

Propiedades comunes

Propiedad	Propósito	Ejemplo
`color`	Color del texto	`color: #333;`
`background-color`	Color de fondo	`background-color: #FFF59D;`
`padding`	Espaciado interior	`padding: 4px 8px;`
`border`	Estilo de borde	`border: 1px solid #FFD54F;`
`border-radius`	Esquinas redondeadas	`border-radius: 4px;`
`font-weight`	Negrita del texto	`font-weight: 600;`
`font-size`	Tamaño del texto	`font-size: 14px;`
`text-decoration`	Subrayado, etc.	`text-decoration: underline;`
`opacity`	Transparencia	`opacity: 0.8;`
`transition`	Tiempo de animación	`transition: color 0.2s ease-out;`

Limitaciones técnicas

Tamaño máximo: 8 KB (8192 caracteres)
Editor: CodeMirror 6
Validación: CSS Analizador de árboles
Selector: Debe utilizar [data-read-frog-custom-translation-style='custom']
Clase contenedora: las traducciones están empaquetadas en .read-frog-translated-content-wrapper con los atributos lang y dir
Atributos disponibles: lang (códigos de idioma ISO 639-1) y dir (ltr/rtl)

Aprendizaje CSS

Si es nuevo en CSS, estos recursos le ayudarán:

Tutoriales para principiantes

MDN CSS Basics - Introducción completa
W3Schools CSS Tutorial - Ejemplos interactivos
CSS-Tricks Guides - Técnicas prácticas CSS

CSS Referencia de propiedades

MDN CSS Reference - Documentación completa de la propiedad
CSS Values and Units - Comprensión de unidades (px, %, em, etc.)

Colores

MDN Color Values - Formatos de color explicados
Coolors - Generador de paleta de colores
Color Hunt - Inspiración en combinación de colores

Práctica interactiva

CSS Diner - Aprende selectores CSS a través de juegos
Flexbox Froggy: aprende el diseño (aunque no es necesario para el estilo básico)

Solución de problemas

Estilo no aplicable

Verifique el estado de validación (debe estar en verde "Válido")
Verifique que el selector sea exactamente [data-read-frog-custom-translation-style='custom']
Asegúrese de que "Usar estilo personalizado" esté activado.
Actualizar la página web después de guardar

Errores de sintaxis

Errores comunes:

Falta punto y coma: color: red → color: red;
Unidad faltante: padding: 10 → padding: 10px
Color incompleto: #FF → #FF5733
Propiedad no válida: colour: red → color: red

Conflictos de estilo

Si los estilos parecen inesperados:

Compruebe si el CSS del sitio web anula el suyo
Aumentar la especificidad si es necesario (aunque normalmente no es necesario)
Pruebe en diferentes sitios web para identificar problemas específicos del sitio.

Estilos de traducción personalizados

On this page