Tùy biến phụ đề bằng CSS: bắt đầu từ một mẫu có sẵn

Phụ đề nên phù hợp với cách bạn xem

Trước đây, kiểu phụ đề dừng ở các điều khiển quen thuộc: phông chữ, kích thước, độ đậm, màu và độ trong suốt của nền. Chúng đủ cho việc xem hằng ngày, nhưng chưa bao quát mọi cách sử dụng phụ đề song ngữ.

Khi luyện nghe, bạn có thể muốn ẩn bản dịch cho đến lúc cần. Nếu mắt luôn nhìn vào câu gốc, bạn có thể làm mờ nó. Với video có hình ảnh phức tạp, bạn có thể cần nền rõ hơn, khoảng cách rộng hơn hoặc một chuyển động nhỏ để dễ tìm dòng hiện tại.

Read Frog 1.46.5 bổ sung CSS tùy chỉnh cho kiểu phụ đề video. Tính năng đi kèm bản xem trước trực tiếp và ba mẫu dựng sẵn, để bạn bắt đầu bằng một cú nhấp và chỉ sửa mã khi muốn.

Bắt đầu bằng một mẫu

Mở trình đơn và chọn hành vi gần nhất với nhu cầu của bạn:

Mẫu chỉ thêm CSS thông thường vào trình chỉnh sửa, không khóa bạn vào một chế độ. Bạn có thể đổi mọi giá trị và kết hợp nhiều mẫu, chẳng hạn vừa làm mờ bản dịch vừa giảm độ nổi của câu gốc.

Chỉnh sửa và nhìn thấy kết quả ngay

Bản xem trước cập nhật trong lúc bạn nhập và dùng cùng cấu trúc với phụ đề thật. Bạn không cần lưu sau mỗi thay đổi hay chuyển qua lại giữa cài đặt và video.

Trình chỉnh sửa có tô màu cú pháp và kiểm tra hợp lệ. CSS đúng được xác nhận rõ ràng; lỗi cú pháp hoặc bảng kiểu quá dài bị chặn trước khi lưu. Việc lưu vẫn cần thao tác rõ ràng, nên một thử nghiệm còn dang dở sẽ không vô tình trở thành kiểu phụ đề chính thức.

Các điều khiển kiểu thông thường vẫn hoạt động. CSS tùy chỉnh được áp dụng trên phông chữ, kích thước, độ đậm, màu và nền bạn đã chọn, đồng thời có thể ghi đè chúng mà không cần !important.

Ba lớp cho toàn bộ vùng phụ đề

Bạn chỉ cần ba bộ chọn:

Mẫu Blur translation chỉ là đoạn CSS sau:

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

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

Bảng kiểu được cô lập bên trong lớp phụ đề của Read Frog nên không thể thay đổi trang YouTube xung quanh. Bản xem trước dùng cùng ranh giới và cấu trúc lớp với lớp phụ đề thật.

Cách sử dụng

1. Mở Cài đặt Read Frog → Phụ đề video → Kiểu phụ đề.
2. Chọn CSS tùy chỉnh ở cuối trang kiểu.
3. Chọn một mẫu hoặc viết CSS trong khi theo dõi bản xem trước.
4. Khi kiểm tra hợp lệ hoàn tất, chọn Lưu.

CSS tùy chỉnh cho phụ đề có trong Read Frog 1.46.5. Sau khi tiện ích được cập nhật, bạn không cần bật thêm tùy chọn nào.