Kiểu bản dịch

Mở Dịch trang → Kiểu hiển thị bản dịch trong cài đặt. Bản xem trước hiển thị kết quả ngay khi bạn thay đổi.

Kiểu dựng sẵn

Kiểu	Trông như thế nào
Không	Chữ thường, giống bản gốc
Màu chữ	Bản dịch mang màu nhấn (mặc định)
Nền	Nền tô nhẹ phía sau bản dịch
Làm mờ	Bản dịch nhạt hơn bản gốc
Hiệu ứng mờ	Mờ đi cho đến khi bạn di chuột vào, để tự kiểm tra
Trích dẫn	Một vạch bên trái, như đoạn trích dẫn
Đường nét đứt	Gạch chân bằng nét đứt
Viền	Khung mảnh quanh bản dịch

CSS của riêng bạn

Bật Sử dụng kiểu CSS tùy chỉnh và viết CSS trong trình soạn thảo. Bản dịch mang thuộc tính data-read-frog-custom-translation-style="custom", nên hãy bắt đầu quy tắc bằng bộ chọn đó:

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

Trình soạn thảo kiểm tra CSS khi bạn gõ và lưu bằng Lưu. CSS nào cũng dùng được, kể cả phông chữ, chuyển tiếp và hoạt ảnh.

Gợi ý

Ẩn bản dịch cho đến khi di chuột vào:

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

Phông chữ khác cho một ngôn ngữ, dùng thuộc tính lang mà bản dịch mang theo:

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() chọn màu thứ nhất trên trang sáng và màu thứ hai trên trang tối, nên một quy tắc dùng được cho cả hai.