陪讀蛙

自訂翻譯樣式

配置自訂 CSS 來個性化你的翻譯外觀

概述

陪讀蛙允許你使用自己的 CSS 樣式自訂翻譯在網頁上的顯示方式。這讓你可以完全控制顏色、背景、邊框、動畫等。

你可以為所有翻譯套用全域樣式，也可以針對特定語言和文字方向設定樣式。例如，你可以為中文、日文和韓文翻譯使用不同的字體，或為阿拉伯語和希伯來語等從右向左的語言調整佈局。

啟用自訂 CSS

  1. 打開陪讀蛙設置
  2. 导航到 翻译 → 翻译显示样式
  3. 将 "使用自定义样式" 切换为开启
  4. CSS 编辑器将显示默认模板

CSS 選擇器

基本選擇器

所有自訂樣式必須針對特定選擇器:

[data-read-frog-custom-translation-style='custom'] {
  /* 你的样式 */
}

此選擇器套用於頁面上的所有翻譯文字元素。

包裝器選擇器

翻譯內容被包裹在一個帶有語言和方向屬性的容器中:

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

你可以针对特定的语言或方向:

/* 针对中文翻译 */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  /* 中文样式 */
}

/* 针对从右向左的语言 */
.read-frog-translated-content-wrapper[dir='rtl'] [data-read-frog-custom-translation-style='custom'] {
  /* 从右向左文本的样式 */
}

編輯器功能

語法高亮

编辑器使用 CodeMirror 6,提供:

  • 彩色 CSS 語法
  • 行號
  • 大型样式表的代码折叠
  • 自動縮排

顏色選擇器

點擊編輯器中的任何顏色值以開啟互動式顏色選擇器:

  1. 点击颜色值如 #FF5733、rgb(255, 87, 51) 或 hsl(9, 100%, 60%)
  2. 可视化选择器立即出现
  3. 使用滑块或输入字段调整
  4. 更改即時更新

支援的顏色格式:

  • 十六進位: #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 語法正確,可以保存
  • 驗證中(灰色): 正在檢查你的更改(500ms 防手震)
  • 錯誤(紅色): 偵測到語法錯誤並顯示錯誤訊息

驗證檢查:

  • 文法錯誤(拼字錯誤、缺少括號)
  • 屬性名稱有效性
  • 選擇器正確性
  • 大小限制(最大 8KB)

基本 CSS 範例

簡單字體顏色

[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 屬性針對特定語言的翻譯:

/* 中文翻译使用传统衬线字体 */
.read-frog-translated-content-wrapper[lang='zh'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "华文楷体", serif;
  color: #8B4513;
}

/* 日语翻译 */
.read-frog-translated-content-wrapper[lang='ja'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

/* 韩语翻译 */
.read-frog-translated-content-wrapper[lang='ko'] [data-read-frog-custom-translation-style='custom'] {
  font-family: "Nanum Myeongjo", "Batang", serif;
}

針對文字方向的樣式

根據文字方向設定樣式(對阿拉伯語、希伯來語等從右向左的語言很有用):

/* 从右向左的语言 */
.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;
}

/* 从左向右的语言 */
.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() 函數自動適應主題:

[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(選擇器特異性已經很高)
  • 不要寫過於複雜的樣式(專注於基本屬性)
  • 不要超過 8KB 大小限制
  • 避免缺少單位或不完整的顏色代碼

常用屬性

屬性用途範例
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;

技術限制

  • 最大大小: 8KB (8,192 字元)
  • 編輯器: CodeMirror 6
  • 驗證: CSS Tree 解析器
  • 選擇器: 必須使用 [data-read-frog-custom-translation-style='custom']
  • 包裝器類別: 翻譯內容被包裹在 .read-frog-translated-content-wrapper 中,帶有 lang 和 dir 屬性
  • 可用屬性: lang (ISO 639-1 語言代碼) 和 dir (ltr/rtl)

學習 CSS

如果你是 CSS 新手,這些資源會有幫助:

初學者教程

CSS 屬性參考

顏色

互動式練習

故障排除

樣式未套用

  1. 檢查驗證狀態(必須是綠色"有效")
  2. 驗證選擇器完全是 [data-read-frog-custom-translation-style='custom']
  3. 確保"使用自訂樣式"已切換為開啟
  4. 儲存後重新整理網頁

語法錯誤

常見錯誤:

  • 缺少分號: color: red → color: red;
  • 缺少單位: padding: 10 → padding: 10px
  • 不完整的顏色: #FF → #FF5733
  • 無效屬性: colour: red → color: red

樣式衝突

如果樣式看起來不符合預期:

  • 檢查網站的 CSS 是否覆蓋了你的樣式
  • 如果需要,增加特異性(儘管通常不需要)
  • 在不同網站上測試以識別特定於網站的問題

本頁內容

概述啟用自訂 CSSCSS 選擇器基本選擇器包裝器選擇器編輯器功能語法高亮顏色選擇器即時驗證基本 CSS 範例簡單字體顏色附邊框醒目學習模式高級技巧自訂字體針對特定語言的樣式針對文字方向的樣式CSS 變數淺色/深色模式支持懸停效果動畫最佳實踐要做的 ✅不要做的 ❌常用屬性技術限制學習 CSS初學者教程CSS 屬性參考顏色互動式練習故障排除樣式未套用語法錯誤樣式衝突