Свой стиль субтитров: начните с шаблона CSS

Минималистичный предпросмотр субтитров с шаблоном Blur translation

Субтитры должны подстраиваться под ваш способ просмотра

Раньше стиль субтитров ограничивался привычными настройками: шрифтом, размером, насыщенностью, цветом и прозрачностью фона. Для обычного просмотра этого достаточно, но двуязычные субтитры можно использовать по-разному.

При тренировке аудирования перевод удобно скрывать до момента проверки. Если взгляд постоянно перескакивает на оригинал, его можно приглушить. А на насыщенном видео может понадобиться более заметный фон, дополнительные интервалы или небольшая анимация.

В Read Frog 1.46.5 к стилям видеосубтитров добавлен пользовательский CSS. Есть живой предпросмотр и три готовых шаблона: начните одним нажатием и редактируйте код только при желании.

Начните с шаблона

Откройте меню и выберите ближайший к вашей задаче вариант:

Шаблон	Что делает	Когда полезен
Blur translation	Размывает перевод и показывает его при наведении	Сначала услышать, затем проверить смысл
Dashed translation	Добавляет пунктирное подчёркивание перевода	Быстро различать две строки
Dim original	Уменьшает непрозрачность оригинала	Сделать перевод визуально главным

Шаблоны добавляют обычный CSS в редактор и не запирают вас в режиме. Любое значение можно изменить, а шаблоны — сочетать, например размыть перевод и одновременно приглушить оригинал.

Попробуйте Blur translation для активного аудирования. Сначала прослушайте фразу, а затем наведите указатель на размытый перевод, только если хотите его проверить.

Редактируйте и сразу смотрите результат

Предпросмотр обновляется во время ввода и использует ту же структуру, что реальные субтитры. Не нужно сохранять каждое изменение или переключаться между настройками и видео.

Настоящий редактор CSS с размытым переводом в живом предпросмотре

В редакторе есть подсветка синтаксиса и проверка. Корректный CSS получает явное подтверждение, а синтаксические ошибки и слишком длинные таблицы стилей блокируются до сохранения. Сохранение остаётся ручным, поэтому незаконченный эксперимент не станет вашим стилем случайно.

Обычные настройки продолжают работать. CSS накладывается поверх выбранных шрифтов, размеров, насыщенности, цветов и фона и может переопределять их без !important.

Три класса для всей области субтитров

Нужны только три селектора:

Селектор	Что выбирает
`.read-frog-subtitles-box`	Фоновый блок вокруг обеих строк
`.subtitles-main`	Строку оригинала
`.subtitles-translation`	Строку перевода

Шаблон Blur translation — это простой CSS:

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

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

Таблица стилей изолирована внутри слоя субтитров Read Frog и не меняет страницу YouTube. Предпросмотр использует ту же границу и те же классы, что настоящий слой.

Как использовать

Откройте Настройки Read Frog → Видеосубтитры → Стиль субтитров.
Внизу страницы выберите Пользовательский CSS.
Примените шаблон или напишите CSS, наблюдая за предпросмотром.
После успешной проверки нажмите Сохранить.

Пользовательский CSS для субтитров доступен в Read Frog 1.46.5. После обновления ничего дополнительно включать не нужно.