陪讀蛙

自訂字幕樣式

用自己的 CSS 打造影片字幕：模糊譯文、弱化原文，或重新設計字幕框。

字幕樣式頁面可以調整字型、縮放、粗細、顏色與背景透明度。自訂 CSS 負責那些控制項碰不到的部分：用模糊蓋住譯文、真的需要時才看，替譯文加底線，把原文推到次要位置，或重新設計字幕框的外形。

它只作用於陪讀蛙的字幕覆蓋層。網頁翻譯有一份獨立的樣式表，請見自訂翻譯樣式。

開啟編輯器

  1. 開啟 設定 → 影片字幕。
  2. 點擊自訂樣式進入字幕樣式。
  3. 捲動到自訂 CSS 並點擊進入。
  4. 撰寫你的 CSS。編輯器上方的預覽會隨著輸入即時更新。
  5. 按下儲存。

儲存會同步到已經開啟的播放器，所以你可以在另一個分頁留一部影片，一邊存一邊看效果。清空編輯器再儲存就會移除這段 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-* 變數

那四個控制項背後的變數是以行內樣式寫在每一行上的，而行內宣告的優先級高過任何樣式表規則。在自訂 CSS 裡寫 --rf-subtitle-color 不會有任何效果：

/* 無效——該變數是行內設定的。 */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* 有效。 */
.subtitles-main { color: #7cf; }

字幕框背景需要 !important

背景透明度基於同樣的原因也是行內寫在框上的，這是自訂 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 KB。編輯器會隨著輸入檢查語法，CSS 不合法或過長時會停用儲存。
/* 動畫沒問題，而且不會跑到覆蓋層外面。 */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

排除問題

  • 儲存後沒有變化： 先確認狀態顯示 CSS 有效、按鈕顯示已儲存，再檢查規則有沒有命中那三個類別名稱之一。
  • 替框設定的背景色無效： 加上 !important。透明度控制項是把這個屬性行內寫上去的。
  • 覆寫 --rf-subtitle-* 沒有效果： 改成直接設定 color、font-size、font-family 或 font-weight。
  • 全螢幕時字級突然變了： 把那條 font-size 從 px 換成 em。
  • 字型始終沒生效： @font-face 在覆蓋層裡不起作用，請使用系統上已安裝的字型。
  • 儲存按鈕是灰的： 編輯器發現語法錯誤，或樣式表超過 8 KB。
  • 覆蓋層看起來壞掉了： 清空編輯器並儲存。CSS 會立刻移除，樣式控制項重新接手。

自訂 CSS 和其他設定存在一起，會隨設定匯出一併帶走，請見設定、同步與備份。覆蓋層的其餘說明請見影片字幕。

On this page

開啟編輯器從預設模板開始模糊譯文虛線譯文弱化原文可以使用的選擇器與樣式控制項搭配改屬性，別改 --rf-subtitle-* 變數字幕框背景需要 !important字級用 em，別用 px更多範例拿掉底框，替文字描邊讓譯文當主角長句靠左對齊依語言設定字型作用範圍與限制排除問題