Пользовательские стили перевода

Настройте собственный CSS, чтобы персонализировать внешний вид вашего перевода.

Обзор

Read Frog позволяет вам настроить внешний вид переводов на веб-страницах, используя ваши собственные стили CSS. Это дает вам полный контроль над цветами, фоном, границами, анимацией и многим другим.

Вы можете применять стили глобально ко всем переводам или ориентироваться на определенные языки и направления текста. Например, вы можете использовать разные шрифты для переводов на китайский, японский и корейский языки или настроить макет для языков с письмом справа налево, таких как арабский и иврит.

Включение пользовательского CSS

Откройте настройки Read Frog
Перейдите к Перевод → Стиль отображения перевода.
Установите для параметра Использовать собственный стиль значение ВКЛ.
Редактор CSS появится с шаблоном по умолчанию.

CSS Селекторы

Базовый селектор

Все пользовательские стили должны быть нацелены на конкретный селектор:

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

Этот селектор применяется ко всем переведенным текстовым элементам на странице.

Селектор оболочки

Переведенный контент помещается в контейнер с атрибутами языка и направления:

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

Вы можете настроить таргетинг на определенные языки или направления:

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

Возможности редактора

Подсветка синтаксиса

Редактор использует CodeMirror 6, обеспечивая:

Синтаксис CSS с цветовой кодировкой
Номера строк
Свертывание кода для больших таблиц стилей
Авто-отступ

Выбор цвета

Щелкните любое значение цвета в редакторе, чтобы открыть интерактивную палитру цветов:

Нажмите на значения цвета, например #FF5733, rgb(255, 87, 51) или hsl(9, 100%, 60%).
Визуальный выбор появляется мгновенно
Отрегулируйте с помощью ползунков или полей ввода.
Изменения обновляются в режиме реального времени

Поддерживаемые цветовые форматы:

Шестнадцатеричный: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
Именованные цвета: tomato, skyblue, gold.
CSS переменные: var(--my-color)

Живая проверка

Редактор проверяет ваш CSS перед сохранением:

Действителен (зеленый): CSS синтаксически правильный, готов к сохранению.
Проверка (серый): проверка изменений (устранение дребезга 500 мс).
Ошибка (красный): обнаружена синтаксическая ошибка с сообщением об ошибке.

Проверки валидации:

Синтаксические ошибки (опечатки, отсутствие скобок)
Срок действия имени свойства
Корректность селектора
Ограничения на размер (максимум 8 КБ)

Основные примеры CSS

импортировать из '@/components/css-style-preview'

Простой цвет шрифта

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

С границей

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

Смелый режим обучения

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

Передовые методы

Пользовательские шрифты

Измените шрифт для всех переводов:

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

Языковое оформление

Целевые переводы на определенные языки с помощью атрибута оболочки lang:

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

Стиль, ориентированный на определенное направление

Стилизовать переводы в зависимости от направления текста (полезно для языков с письмом справа налево, таких как арабский, иврит):

/* 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 Переменные

Определите повторно используемые значения:

[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

Используйте функцию light-dark() для автоматической адаптации темы:

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

Эффекты при наведении

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

Анимации

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

Лучшие практики

Что делать ✅

Начните с простых стилей и постепенно добавляйте сложность.
Тестируйте на нескольких сайтах
Используйте фон с низкой непрозрачностью, чтобы сохранить читабельность.
Включите единицы измерения длины: padding: 10px, а не padding: 10.
Используйте полные шестнадцатеричные коды: #FF5733, а не #FF.

Нельзя ❌

Избегайте !important (специфичность селектора уже высока)
Не пишите слишком сложные стили (сосредоточьтесь на основных свойствах).
Не превышайте ограничение размера 8 КБ.
Избегайте пропущенных единиц или неполных цветовых кодов.

Общие свойства

Недвижимость	Цель	Пример
`color`	Цвет текста	`color: #333;`
`background-color`	Цвет фона	`background-color: #FFF59D;`
`padding`	Внутреннее расстояние	`padding: 4px 8px;`
`border`	Стиль границы	`border: 1px solid #FFD54F;`
`border-radius`	Закругленные углы	`border-radius: 4px;`
`font-weight`	Жирность текста	`font-weight: 600;`
`font-size`	Размер текста	`font-size: 14px;`
`text-decoration`	Подчеркивание и т. д.	`text-decoration: underline;`
`opacity`	Прозрачность	`opacity: 0.8;`
`transition`	Время анимации	`transition: color 0.2s ease-out;`

Технические ограничения

Максимальный размер: 8 КБ (8192 символа).
Редактор: CodeMirror 6
Проверка: CSS Анализатор дерева
Селектор: необходимо использовать [data-read-frog-custom-translation-style='custom'].
Класс-оболочка: переводы заключаются в .read-frog-translated-content-wrapper с атрибутами lang и dir.
Доступные атрибуты: lang (коды языков ISO 639-1) и dir (ltr/rtl)).

Обучение CSS

Если вы новичок в CSS, эти ресурсы помогут:

Учебники для начинающих

MDN CSS Basics - Подробное введение
W3Schools CSS Tutorial — Интерактивные примеры
CSS-Tricks Guides - Практические методы CSS

CSS Справочник свойств

MDN CSS Reference — Полная документация по недвижимости
CSS Values and Units — Понимание единиц измерения (px, %, em и т. д.)

Цвета

MDN Color Values — Объяснение цветовых форматов
Coolors — Генератор цветовой палитры
Color Hunt — Цветовая гамма для вдохновения

Интерактивная практика

CSS Diner — Изучите селекторы CSS с помощью игр.
Flexbox Froggy — Изучите макет (но не требуется для базового стиля)

Устранение неполадок

Стиль не применяется

Проверьте статус проверки (должен быть зеленый «Действительный»)
Убедитесь, что селектор — это именно [data-read-frog-custom-translation-style='custom'].
Убедитесь, что параметр «Использовать собственный стиль» включен.
Обновите веб-страницу после сохранения

Синтаксические ошибки

Распространенные ошибки:

Отсутствует точка с запятой: color: red → color: red;.
Отсутствует единица измерения: padding: 10 → padding: 10px.
Неполный цвет: #FF → #FF5733
Недопустимое свойство: colour: red → color: red.

Конфликты стилей

Если стили выглядят неожиданно:

Проверьте, не переопределяет ли CSS веб-сайта ваш
При необходимости увеличьте специфичность (хотя обычно это не требуется)
Тестируйте на разных веб-сайтах, чтобы выявить проблемы, специфичные для каждого сайта.

Пользовательские стили перевода

On this page