Kiểu phụ đề tùy chỉnh

Tự viết CSS cho phụ đề video — làm mờ bản dịch, làm nhạt bản gốc, hoặc thiết kế lại khung phụ đề.

Trang kiểu phụ đề lo phần font chữ, tỉ lệ, độ đậm, màu sắc và độ mờ nền. CSS tùy chỉnh lo mọi thứ nằm ngoài tầm với của các thanh trượt đó: che bản dịch bằng một lớp mờ cho tới khi bạn thật sự cần, gạch chân nó, đẩy bản gốc ra sau, hoặc đổi hình dáng khung phụ đề.

Nó chỉ áp dụng cho lớp phụ đề của Read Frog. Dịch trang web có bảng kiểu riêng — xem Phong cách dịch tùy chỉnh.

Mở trình soạn thảo

Mở Cài đặt → Phụ đề video.
Vào Kiểu phụ đề bằng Tùy chỉnh kiểu.
Cuộn tới CSS tùy chỉnh rồi mở ra.
Viết CSS của bạn. Khung xem trước phía trên cập nhật ngay khi bạn gõ.
Nhấn Lưu.

Việc lưu lan tới cả những trình phát đang mở, nên bạn có thể để một video ở tab khác và xem từng lần lưu ăn vào đâu. Xóa trắng trình soạn thảo rồi lưu lại sẽ gỡ CSS đi và trả phụ đề về cho các thanh trượt.

Bắt đầu từ một mẫu dựng sẵn

Danh sách Mẫu dựng sẵn có ba khối dùng được ngay. Chọn một mẫu sẽ nối thêm vào cuối trình soạn thảo chứ không thay thế nội dung đang có, nên các mẫu chồng lên nhau được: chọn hai mẫu để vừa làm mờ bản dịch vừa làm nhạt bản gốc.

Làm mờ bản dịch

Nghe trước, chỉ đọc khi đã chịu thua. Lớp mờ biến mất khi con trỏ nằm trên dòng đó.

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

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

Gạch nét đứt bản dịch

Đánh dấu bản dịch là phần phụ trợ chứ không phải nội dung chính.

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

Làm nhạt bản gốc

Giữ nguyên dòng gốc nhưng không để mắt bạn rơi vào đó trước.

.subtitles-main {
  opacity: 0.6;
}

Các bộ chọn bạn dùng được

Lớp phụ đề được giữ nhỏ một cách có chủ ý. Ba tên lớp sau là cam kết công khai và sẽ không bị đổi tên:

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

Bộ chọn	Khớp với gì
`.read-frog-subtitles-box`	khung chứa cả hai dòng — nền, đệm, bo góc, chiều rộng, canh lề
`.subtitles-main`	dòng phụ đề gốc
`.subtitles-translation`	dòng bản dịch

Dòng bản dịch còn mang thêm hai điểm bám:

lang và dir đi theo ngôn ngữ đích của bạn, nên cả .subtitles-translation[lang='ja'] lẫn .subtitles-translation[dir='rtl'] đều dùng được.
data-pending="true" được đặt trong lúc bản dịch còn đang trên đường về.

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

Trong DOM bản gốc luôn đứng trước; Vị trí bản dịch chỉ đảo chỗ hai dòng về mặt hiển thị bằng order. Hãy khớp theo tên lớp thay vì :first-child.

Phối hợp với các tùy chọn kiểu

Font chữ, tỉ lệ, độ đậm và màu bạn chọn trong giao diện được đưa tới từng dòng dưới dạng biến CSS, rồi một quy tắc trong bảng kiểu biến chúng thành khai báo thật. CSS của bạn được chèn sau quy tắc đó, nên một khai báo bình thường là thắng — không cần !important:

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

Có hai ngoại lệ nên biết trước khi mất công.

Đặt thuộc tính, đừng đặt biến `--rf-subtitle-*`

Các biến đứng sau bốn tùy chọn đó được viết inline ngay trên từng dòng, mà khai báo inline thì cao hơn mọi quy tắc trong bảng kiểu. Viết --rf-subtitle-color trong CSS tùy chỉnh sẽ chẳng có tác dụng gì:

/* Bị bỏ qua — biến này được đặt inline. */
.subtitles-main { --rf-subtitle-color: #7cf; }

/* Có tác dụng. */
.subtitles-main { color: #7cf; }

Nền khung cần `!important`

Độ mờ nền cũng được viết inline lên khung vì cùng lý do đó, và đây là chỗ duy nhất CSS tùy chỉnh phải cứng rắn:

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

Mọi thứ còn lại của khung — đệm, bo góc, chiều rộng, canh lề — chỉ cần khai báo thường.

Cỡ chữ dùng `em`, đừng dùng `px`

Cỡ chữ gốc của lớp phụ đề được tính từ chiều cao video; nhờ vậy phụ đề vẫn giữ tỉ lệ khi vào toàn màn hình hay thu về trình phát nhỏ. 1em trên một dòng nghĩa là "cỡ mà trình phát sẽ dùng"; cỡ tính bằng px sẽ đóng băng và không còn bám theo video.

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

Thêm vài ví dụ

Bỏ khung, viền chữ

Hợp với cảnh quay sáng, khi mảng nền tối còn chướng mắt hơn cả phụ đề.

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

Để bản dịch dẫn dắt

Thu nhỏ dòng gốc thành phần tham chiếu và dồn sức nặng cho bản dịch.

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

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

Canh trái cho dòng dài

Khi phụ đề xuống tới ba dòng, canh giữa rất khó đọc.

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

Kiểu chữ theo từng ngôn ngữ

Hữu ích khi bạn đọc bằng nhiều ngôn ngữ đích và muốn mỗi thứ tiếng đều đẹp.

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

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

Phạm vi và giới hạn

Lớp phụ đề được vẽ bên trong một shadow root nằm trong trình phát. Chính ranh giới đó giữ cho CSS của bạn không rò ra trang, và cũng chính nó quyết định thứ gì lặng lẽ không có tác dụng:

Có tác dụng và không ra khỏi lớp phụ đề: @keyframes, @media, @supports, transition, lớp giả, và các biến CSS do bạn tự định nghĩa.
Bị bỏ qua: @font-face và @property. Shadow root không đăng ký được cả hai, nên hãy chọn font đã có sẵn trên hệ thống thay vì tự tải font.
Không khớp gì cả: :root và body. Bên trong lớp phụ đề không có phần tử cấp trang — hãy dùng ba lớp ở trên.
Ngoài tầm với: các nút điều khiển của trình phát YouTube, trang phía sau nó, và phụ đề gốc của YouTube. CSS tùy chỉnh không tạo kiểu được cho bất cứ thứ gì ngoài lớp phụ đề.
Giới hạn dung lượng: 8 KB. Trình soạn thảo kiểm tra cú pháp khi bạn gõ và khóa Lưu khi CSS sai hoặc quá dài.

/* Animation dùng thoải mái, và không tràn ra ngoài. */
@keyframes rf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

Xử lý sự cố

Lưu xong không thấy đổi gì: kiểm tra dòng trạng thái ghi CSS hợp lệ và nút ghi Đã lưu, rồi xem quy tắc có nhắm vào một trong ba tên lớp không.
Màu nền đặt cho khung bị bỏ qua: thêm !important. Thanh trượt độ mờ ghi thuộc tính đó theo kiểu inline.
Ghi đè --rf-subtitle-* không ăn: hãy đặt thẳng color, font-size, font-family hoặc font-weight.
Cỡ chữ nhảy khi vào toàn màn hình: đổi font-size đó từ px sang em.
Font không bao giờ ăn: @font-face không hoạt động trong lớp phụ đề; hãy dùng font đã cài trên hệ thống.
Nút Lưu bị mờ: trình soạn thảo phát hiện lỗi cú pháp, hoặc bảng kiểu vượt quá 8 KB.
Lớp phụ đề trông hỏng: xóa trắng trình soạn thảo rồi lưu. CSS bị gỡ ngay và các tùy chọn kiểu tiếp quản trở lại.

CSS tùy chỉnh được lưu cùng phần cài đặt còn lại nên sẽ đi theo bản xuất cấu hình — xem Cấu hình, đồng bộ và backup. Mọi thứ khác về lớp phụ đề nằm ở Phụ đề video.

Kiểu phụ đề tùy chỉnh

On this page