Custom Translation Styles

Overview

Read Frog allows you to customize how translations appear on webpages using your own CSS styles. This gives you complete control over colors, backgrounds, borders, animations, and more.

You can apply styles globally to all translations, or target specific languages and text directions. For example, you can use different fonts for Chinese, Japanese, and Korean translations, or adjust layout for right-to-left languages like Arabic and Hebrew.

Enabling Custom CSS

1. Open Read Frog settings
2. Navigate to Translation → Translation Display Style
3. Toggle "Use Custom Style" to ON
4. The CSS editor will appear with a default template

CSS Selectors

Basic Selector

All custom styles must target the specific selector:

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

This selector applies to all translated text elements on the page.

Wrapper Selector

Translated content is wrapped in a container with language and direction attributes:

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

You can target specific languages or directions:

/* 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 */
}

Editor Features

Syntax Highlighting

The editor uses CodeMirror 6, providing:

• Color-coded CSS syntax
• Line numbers
• Code folding for large stylesheets
• Auto-indentation

Color Picker

Click any color value in the editor to open an interactive color picker:

1. Click on color values like #FF5733, rgb(255, 87, 51), or hsl(9, 100%, 60%)
2. Visual picker appears instantly
3. Adjust using sliders or input fields
4. Changes update in real-time

Supported color formats:

• Hex: #FF5733
• RGB/RGBA: rgba(255, 87, 51, 0.8)
• HSL/HSLA: hsla(9, 100%, 60%, 0.8)
• Named colors: tomato, skyblue, gold
• CSS variables: var(--my-color)

Live Validation

The editor validates your CSS before saving:

• Valid (Green): CSS is syntactically correct, ready to save
• Validating (Gray): Checking your changes (500ms debounce)
• Error (Red): Syntax error detected with error message

Validation checks:

• Syntax errors (typos, missing brackets)
• Property name validity
• Selector correctness
• Size limits (8KB maximum)

Basic CSS Examples

Simple Font Color

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

With Border

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

Bold Study Mode

[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;
}

Advanced Techniques

Custom Fonts

Change the font for all translations:

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

Language-Specific Styling

Target translations in specific languages using the wrapper's lang attribute:

/* 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;
}

Direction-Specific Styling

Style translations based on text direction (useful for RTL languages like Arabic, Hebrew):

/* 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

Define reusable values:

[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;
}

Light/Dark Mode Support

Use light-dark() function for automatic theme adaptation:

[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;
}

Hover Effects

[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);
}

Animations

[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%;
  }
}

Best Practices

Do's ✅

• Start with simple styles and add complexity gradually
• Test on multiple websites
• Use low-opacity backgrounds to maintain readability
• Include units for length values: padding: 10px not padding: 10
• Use complete hex codes: #FF5733 not #FF

Don'ts ❌

• Avoid !important (selector specificity is already high)
• Don't write overly complex styles (focus on essential properties)
• Don't exceed 8KB size limit
• Avoid missing units or incomplete color codes

Common Properties

Technical Limitations

• Maximum size: 8KB (8,192 characters)
• Editor: CodeMirror 6
• Validation: CSS Tree parser
• Selector: Must use [data-read-frog-custom-translation-style='custom']
• Wrapper class: Translations are wrapped in .read-frog-translated-content-wrapper with lang and dir attributes
• Available attributes: lang (ISO 639-1 language codes) and dir (ltr/rtl)

Learning CSS

If you're new to CSS, these resources will help:

Beginner Tutorials

• MDN CSS Basics - Comprehensive introduction
• W3Schools CSS Tutorial - Interactive examples
• CSS-Tricks Guides - Practical CSS techniques

CSS Properties Reference

• MDN CSS Reference - Complete property documentation
• CSS Values and Units - Understanding units (px, %, em, etc.)

Colors

• MDN Color Values - Color formats explained
• Coolors - Color palette generator
• Color Hunt - Color scheme inspiration

Interactive Practice

• CSS Diner - Learn CSS selectors through games
• Flexbox Froggy - Learn layout (though not needed for basic styling)

Troubleshooting

Style Not Applying

1. Check validation status (must be green "Valid")
2. Verify selector is exactly [data-read-frog-custom-translation-style='custom']
3. Ensure "Use Custom Style" is toggled ON
4. Refresh the webpage after saving

Syntax Errors

Common mistakes:

• Missing semicolon: color: red → color: red;
• Missing unit: padding: 10 → padding: 10px
• Incomplete color: #FF → #FF5733
• Invalid property: colour: red → color: red

Style Conflicts

If styles look unexpected:

• Check if website's CSS is overriding yours
• Increase specificity if needed (though usually not required)
• Test on different websites to identify site-specific issues