Phong cách dịch tùy chỉnh

Định cấu hình CSS tùy chỉnh để cá nhân hóa giao diện bản dịch của bạn

Tổng quan

Read Frog cho phép bạn tùy chỉnh cách bản dịch xuất hiện trên trang web bằng cách sử dụng kiểu CSS của riêng bạn. Điều này cho phép bạn kiểm soát hoàn toàn màu sắc, hình nền, đường viền, hình động, v.v.

Bạn có thể áp dụng các kiểu trên toàn cầu cho tất cả các bản dịch hoặc nhắm mục tiêu các ngôn ngữ và hướng văn bản cụ thể. Ví dụ: bạn có thể sử dụng các phông chữ khác nhau cho bản dịch tiếng Trung, tiếng Nhật và tiếng Hàn hoặc điều chỉnh bố cục cho các ngôn ngữ từ phải sang trái như tiếng Ả Rập và tiếng Do Thái.

Kích hoạt tùy chỉnh CSS

Mở cài đặt Read Frog
Điều hướng đến Dịch → Phong cách hiển thị bản dịch
Chuyển "Sử dụng kiểu tùy chỉnh" sang BẬT
Trình chỉnh sửa CSS sẽ xuất hiện với mẫu mặc định

CSS Bộ chọn

Bộ chọn cơ bản

Tất cả các kiểu tùy chỉnh phải nhắm mục tiêu bộ chọn cụ thể:

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

Bộ chọn này áp dụng cho tất cả thành phần văn bản đã dịch trên trang.

Bộ chọn gói

Nội dung đã dịch được gói trong một thùng chứa có thuộc tính ngôn ngữ và hướng:

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

Bạn có thể nhắm mục tiêu các ngôn ngữ hoặc hướng cụ thể:

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

Tính năng biên tập

Đánh dấu cú pháp

Trình chỉnh sửa sử dụng CodeMirror 6, cung cấp:

Cú pháp CSS được mã hóa màu
Số dòng
Gấp mã cho các bảng định kiểu lớn
Tự động thụt lề

Bộ chọn màu

Nhấp vào bất kỳ giá trị màu nào trong trình chỉnh sửa để mở bộ chọn màu tương tác:

Nhấp vào các giá trị màu như #FF5733, rgb(255, 87, 51) hoặc hsl(9, 100%, 60%)
Bộ chọn trực quan xuất hiện ngay lập tức
Điều chỉnh bằng thanh trượt hoặc trường nhập
Cập nhật thay đổi theo thời gian thực

Các định dạng màu được hỗ trợ:

Hệ lục phân: #FF5733
RGB/RGBA: rgba(255, 87, 51, 0.8)
HSL/HSLA: hsla(9, 100%, 60%, 0.8)
Tên màu: tomato, skyblue, gold
CSS biến: var(--my-color)

Xác thực trực tiếp

Trình chỉnh sửa xác thực CSS của bạn trước khi lưu:

Hợp lệ (Xanh lục): CSS đúng về mặt cú pháp, sẵn sàng lưu
Đang xác thực (Xám): Kiểm tra các thay đổi của bạn (gỡ lỗi 500ms)
Lỗi (Đỏ): Đã phát hiện lỗi cú pháp kèm theo thông báo lỗi

Kiểm tra xác nhận:

Lỗi cú pháp (lỗi chính tả, thiếu dấu ngoặc)
Hiệu lực của tên tài sản
Độ chính xác của bộ chọn
Giới hạn kích thước (tối đa 8KB)

Cơ bản CSS Ví dụ

nhập từ '@/components/css-style-preview'

Màu chữ đơn giản

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

Có viền

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

Chế độ học tập táo bạo

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

Kỹ thuật nâng cao

Phông chữ tùy chỉnh

Thay đổi phông chữ cho tất cả các bản dịch:

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

Kiểu dáng dành riêng cho ngôn ngữ

Nhắm mục tiêu bản dịch bằng các ngôn ngữ cụ thể bằng thuộc tính lang của trình bao bọc:

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

Kiểu dáng cụ thể theo hướng

Phong cách dịch dựa trên hướng văn bản (hữu ích cho các ngôn ngữ RTL như tiếng Ả Rập, tiếng Do Thái):

/* 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 Biến

Xác định các giá trị có thể sử dụng lại:

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

Hỗ trợ chế độ Light/Dark

Sử dụng chức năng light-dark() để tự động điều chỉnh chủ đề:

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

Hiệu ứng di chuột

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

Hoạt hình

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

Thực tiễn tốt nhất

Việc nên làm ✅

Bắt đầu với các kiểu đơn giản và tăng dần độ phức tạp
Kiểm tra trên nhiều trang web
Sử dụng nền có độ mờ thấp để duy trì khả năng đọc
Bao gồm các đơn vị cho giá trị độ dài: padding: 10px không phải padding: 10
Sử dụng mã hex hoàn chỉnh: #FF5733 không phải #FF

Những điều không nên ❌

Tránh !important (độ đặc hiệu của bộ chọn đã cao)
Đừng viết các kiểu quá phức tạp (tập trung vào các thuộc tính thiết yếu)
Không vượt quá giới hạn kích thước 8KB
Tránh thiếu đơn vị hoặc mã màu không đầy đủ

Thuộc tính chung

Tài sản	Mục đích	Ví dụ
`color`	Màu văn bản	`color: #333;`
`background-color`	Màu nền	`background-color: #FFF59D;`
`padding`	Khoảng cách bên trong	`padding: 4px 8px;`
`border`	Kiểu viền	`border: 1px solid #FFD54F;`
`border-radius`	Các góc tròn	`border-radius: 4px;`
`font-weight`	Độ đậm của văn bản	`font-weight: 600;`
`font-size`	Kích thước văn bản	`font-size: 14px;`
`text-decoration`	Gạch chân, v.v.	`text-decoration: underline;`
`opacity`	Minh bạch	`opacity: 0.8;`
`transition`	Thời gian hoạt ảnh	`transition: color 0.2s ease-out;`

Hạn chế kỹ thuật

Kích thước tối đa: 8KB (8.192 ký tự)
Biên tập viên: CodeMirror 6
Xác thực: CSS Trình phân tích cú pháp cây
Bộ chọn: Phải sử dụng [data-read-frog-custom-translation-style='custom']
Lớp trình bao bọc: Các bản dịch được gói trong .read-frog-translated-content-wrapper với các thuộc tính lang và dir
Các thuộc tính có sẵn: lang (mã ngôn ngữ ISO 639-1) và dir (ltr/rtl)

Học tập CSS

Nếu bạn chưa quen với CSS, những tài nguyên này sẽ giúp ích:

Hướng dẫn cho người mới bắt đầu

MDN CSS Basics - Giới thiệu toàn diện
W3Schools CSS Tutorial - Ví dụ tương tác
CSS-Tricks Guides - Kỹ thuật thực hành CSS

CSS Tham chiếu thuộc tính

MDN CSS Reference - Hoàn thiện hồ sơ tài sản
CSS Values and Units - Hiểu các đơn vị (px, %, em, v.v.)

Màu sắc

MDN Color Values - Giải thích về định dạng màu
Coolors - Trình tạo bảng màu
Color Hunt - Cảm hứng phối màu

Thực hành tương tác

CSS Diner - Tìm hiểu bộ chọn CSS qua trò chơi
Flexbox Froggy - Tìm hiểu bố cục (mặc dù không cần thiết cho kiểu dáng cơ bản)

Khắc phục sự cố

Phong cách Không áp dụng

Kiểm tra trạng thái xác thực (phải có màu xanh lục "Hợp lệ")
Xác minh bộ chọn chính xác là [data-read-frog-custom-translation-style='custom']
Đảm bảo "Sử dụng kiểu tùy chỉnh" được BẬT
Làm mới trang web sau khi lưu

Lỗi cú pháp

Những lỗi thường gặp:

Thiếu dấu chấm phẩy: color: red → color: red;
Thiếu đơn vị: padding: 10 → padding: 10px
Màu chưa hoàn chỉnh: #FF → #FF5733
Thuộc tính không hợp lệ: colour: red → color: red

Xung đột phong cách

Nếu phong cách trông không mong muốn:

Kiểm tra xem CSS của trang web có ghi đè trang web của bạn không
Tăng độ đặc hiệu nếu cần (mặc dù thường không bắt buộc)
Kiểm tra trên các trang web khác nhau để xác định các vấn đề cụ thể của trang web

Phong cách dịch tùy chỉnh

On this page