Пользовательские стили субтитров

Свой CSS для субтитров: размыть перевод, приглушить оригинал или переделать блок субтитров.

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

Он действует только на слой субтитров Read Frog. У перевода веб-страниц своя отдельная таблица стилей — см. Пользовательские стили перевода.

Открыть редактор

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

Сохранение доходит до уже открытых плееров, так что можно держать видео в соседней вкладке и следить за каждым сохранением. Если очистить редактор и сохранить снова, CSS снимется, а субтитры вернутся под управление регуляторов.

Начать с готового шаблона

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

Размыть перевод

Сначала слушайте и читайте, только когда сдались. Пока указатель на строке, размытие снимается.

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

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

Пунктир под переводом

Помечает перевод как подсказку, а не как основной текст.

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

Приглушить оригинал

Оригинал остаётся на месте, но взгляд падает на него не первым.

.subtitles-main {
  opacity: 0.6;
}

Доступные селекторы

Слой намеренно небольшой. Три имени классов — часть публичного контракта, их не переименуют:

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

Селектор	Чему соответствует
`.read-frog-subtitles-box`	блок с обеими строками — фон, отступы, скругления, ширина, выравнивание
`.subtitles-main`	строка оригинала
`.subtitles-translation`	строка перевода

У строки перевода есть ещё две зацепки:

lang и dir следуют за целевым языком, поэтому работают и .subtitles-translation[lang='ja'], и .subtitles-translation[dir='rtl'].
Пока перевод ещё в пути, ставится data-pending="true".

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

В DOM оригинал всегда идёт первым; Позиция перевода меняет строки местами только визуально, через order. Опирайтесь на имена классов, а не на :first-child.

Как это уживается с настройками стиля

Шрифт, масштаб, насыщенность и цвет, выбранные в интерфейсе, приходят на каждую строку как CSS-переменные, а правило таблицы стилей превращает их в объявления. Ваш CSS подключается после этого правила, поэтому обычного объявления достаточно — !important не нужен:

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

Есть два исключения, о которых лучше узнать заранее.

Задавайте свойства, а не переменные `--rf-subtitle-*`

Переменные за этими четырьмя настройками записаны в строку как inline-стиль, а inline-объявление сильнее любого правила таблицы стилей. Написать --rf-subtitle-color в своём CSS — значит не сделать ничего:

/* Игнорируется — переменная задана inline. */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* Работает. */
.subtitles-main { color: #7cf; }

Фону блока нужен `!important`

Прозрачность фона по той же причине записана в блок inline — это единственное место, где вашему CSS приходится настаивать:

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

Всё остальное у блока — отступы, скругления, ширина, выравнивание — принимает обычное объявление.

Размер в `em`, а не в `px`

Корневой размер шрифта слоя вычисляется из высоты видео — именно поэтому субтитры сохраняют пропорции и в полноэкранном режиме, и в мини-плеере. 1em на строке означает «размер, который взял бы сам плеер»; размер в px фиксируется и перестаёт следовать за видео.

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

Ещё примеры

Убрать подложку и обвести текст

Хорошо на светлом видео, где тёмная подложка мешает сильнее самих субтитров.

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

Пусть ведёт перевод

Уменьшает оригинал до справки и отдаёт вес переводу.

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

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

Выровнять длинные строки по левому краю

Как только субтитр переносится на три строки, читать по центру становится тяжело.

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

Типографика по языкам

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

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

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

Область действия и ограничения

Слой отрисовывается внутри shadow root в плеере. Эта граница не даёт вашему CSS утечь на страницу — и она же определяет, что тихо не сработает:

Работает и не выходит за слой: @keyframes, @media, @supports, переходы, псевдоклассы и CSS-переменные, которые вы объявили сами.
Игнорируется: @font-face и @property. Shadow root не может зарегистрировать ни то, ни другое, поэтому берите шрифты, уже установленные в системе, вместо своих.
Ничему не соответствует: :root и body. Внутри слоя нет элемента уровня страницы — используйте три класса выше.
Недостижимо: элементы управления плеера YouTube, страница за ним и встроенные субтитры. Пользовательский CSS не может оформить ничего за пределами слоя субтитров.
Ограничение размера: 8 КБ. Редактор проверяет синтаксис по ходу набора и блокирует Сохранить, пока CSS некорректен или слишком длинный.

/* Анимации допустимы и наружу не выходят. */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

Решение проблем

После сохранения ничего не изменилось: убедитесь, что статус показывает CSS корректен, а кнопка — Сохранено, затем проверьте, что правило нацелено на одно из трёх имён классов.
Цвет фона блока игнорируется: добавьте !important. Регулятор прозрачности пишет это свойство inline.
Переопределение --rf-subtitle-* игнорируется: задайте напрямую color, font-size, font-family или font-weight.
В полноэкранном режиме размер текста скачет: переведите этот font-size из px в em.
Шрифт никогда не применяется: @font-face внутри слоя не работает; возьмите шрифт, установленный в системе.
Кнопка «Сохранить» неактивна: редактор нашёл синтаксическую ошибку или таблица стилей больше 8 КБ.
Слой выглядит сломанным: очистите редактор и сохраните. CSS снимется сразу, а настройки стиля снова возьмут управление.

Пользовательский CSS хранится вместе с остальными настройками, поэтому попадает в экспорт конфигурации — см. Конфигурация, синхронизация и копии. Обо всём остальном, что касается слоя, читайте в Видеосубтитрах.

Пользовательские стили субтитров

On this page