Nói kết luận trước: nâng độ dày đường phân cách lên 3~5px và thêm màu thì ngay cả thẻ có nội dung dài cũng tách bạch mặt trước với mặt sau trong một cái nhìn. Đường phân cách mặc định của Anki là một đường xám nhạt 1px, nên chỉ cần bài viết dài thêm vài dòng là nó chìm nghỉm giữa các đoạn văn. Chỉ riêng việc tăng độ dày đã làm tín hiệu "từ đây là đáp án" trở nên rõ ràng.
Vì sao đường phân cách mặc định bất lực với thẻ dài
Mặt sau của thẻ thường có cấu trúc là đáp án nối tiếp bên dưới nội dung mặt trước
({{FrontSide}}). Nếu mặt trước là thẻ từ vựng chỉ một dòng thì đường 1px cũng
đủ, vì mắt bạn quét được cả màn hình trong một lần.
Vấn đề nằm ở thẻ dạng tự luận. Mặt trước là câu hỏi hai ba câu, mặt sau thêm vài dòng giải thích, thế là màn hình chồng lên nhiều đoạn văn. Lúc này đường xám 1px trông chẳng khác gì khoảng trống giữa hai đoạn. Rốt cuộc mỗi lần ôn bạn lại phải dò ngược lên "câu hỏi đến đâu thì hết nhỉ?", và những lần dò ngược đó cộng dồn 1~2 giây mỗi thẻ, thành ra mỏi mệt đáng kể qua vài trăm thẻ.
Điểm cốt lõi là một đường dày thì không thể bị nhầm với khoảng trống. Thêm cả màu vào nữa thì ngay sau khi lật thẻ, mắt bạn tự động bắt đầu đọc từ dưới đường kẻ.
Độ dày bao nhiêu px là vừa
Cứ chọn theo độ dài nội dung thẻ. Dùng thực tế thì những mức dưới đây là ổn.
- 1~2px — thẻ từ vựng hay thuật ngữ, hai mặt mỗi mặt một dòng. Gần với mặc định và kín đáo.
- 3px — phần lớn thẻ có mặt trước hoặc mặt sau dài hai ba dòng. Đây là mức mặc định ổn thỏa nhất.
- 4~6px — thẻ tự luận có đoạn văn ở mặt trước hoặc phần giảng giải ở mặt sau. Khi có nhiều đoạn thì nó chia ra rất dứt khoát.
- Từ 7px trở lên — trông giống một dải màu hơn là một đường kẻ. Mỗi lần lật thẻ nó lại hút mất ánh nhìn nên không khuyến khích.
Càng tăng độ dày thì đường càng nặng, nên kết hợp giảm chiều rộng đường xuống 60~80% sẽ đẹp hơn. Dày nhưng không kẻ ngang hết màn hình nên không bức bối.
Cách chỉnh trong ankieditor
- Chọn Mặt sau ở phía trên bản xem trước.
- Nhấp vào đường phân cách trên bản xem trước. Nếu chưa có đường phân cách thì chọn phần tử ngay trên đáp án rồi bấm [➕ Đường phân cách] trong "Thêm phần tử".
- Nâng Độ dày đường hiện ra ở bảng bên trái lên 3~5px.
- Chọn màu ở Màu đường ngay bên dưới.
- Nếu cần thì giảm Chiều rộng đường xuống khoảng 70%.
Bản xem trước cập nhật ngay lập tức, nên bạn cứ điền sẵn giá trị mẫu dài đúng như thẻ mình dùng thật rồi vừa chỉnh vừa nhìn là dễ bắt được cảm giác.
CSS thật sự được tạo ra
ankieditor ghi quy tắc như dưới đây vào phần kiểu dáng của mẫu thẻ. Nếu muốn dán thẳng vào Anki thì bạn dùng luôn đoạn mã này cũng được.
#answer { border: none; height: 4px; background-color: #2e86de; width: 70%; }
Ở đây không được thiếu border: none. Thẻ hr có kiểu mặc định
của trình duyệt là viền nổi (inset), nên nếu chỉ định màu mà không xóa viền
thì phần trên và phần dưới khác độ sáng, trông thành một đường đôi mờ mờ. Phải bỏ viền đi
rồi tô bằng height và background-color thì độ dày và màu bạn chỉ
định mới hiện ra đúng như vậy. Anki bản máy tính, AnkiDroid và AnkiMobile đều vẽ thẻ bằng
webview nên đoạn CSS này áp dụng y hệt trong mọi môi trường.
Những điểm cần lưu ý
Chế độ ban đêm cũng dùng đúng màu đó. Chế độ ban đêm của Anki không tự
động đảo ngược màu do người dùng chỉ định. Nếu bạn chỉ xem trên nền sáng rồi chọn một màu
xám rất nhạt thì trên nền tối gần như không thấy gì. Nếu bạn dùng qua lại cả ngày lẫn đêm
thì tông trung tính (ví dụ xanh #2e86de, xám
#888888) là an toàn.
Đường kẻ mà nổi hơn nội dung thì phản tác dụng. Đường phân cách là thứ hỗ trợ mạch đọc chứ không phải yếu tố nhấn mạnh. Nếu thẻ của bạn đã dùng màu nhấn rồi thì nên để đường phân cách ở tông thấp hơn màu đó một bậc.
Phải đặt riêng cho từng Kiểu Phiếu. Mẫu thẻ được lưu theo từng Kiểu Phiếu, nên nếu bạn dùng nhiều Kiểu Phiếu thì phải áp dụng cho từng cái. Ngược lại, tận dụng chính tính chất này mà cho mỗi Kiểu Phiếu một màu đường phân cách khác nhau thì trong lúc ôn bạn còn biết luôn mình đang gặp loại thẻ nào.
Câu hỏi thường gặp
Đổi màu và độ dày đường phân cách trong Anki có được không?
Được. Anki kết xuất thẻ bằng webview nên CSS thông thường áp dụng nguyên vẹn cho thẻ
hr. Phía Anki không có hạn chế riêng nào.
Tôi tăng độ dày mà đường lại biến mất.
Nếu chỉ đặt border: none mà không chỉ định màu nền thì nó thành một ô trống
trong suốt và bạn không thấy đường nữa. Độ dày và màu luôn phải được đặt cùng nhau. Trong
ankieditor thì bạn chỉ động vào một trong hai, cả hai giá trị vẫn được ghi cùng lúc.
Có thể thêm đường phân cách vào mặt trước không?
Có thể. Nhưng mặt trước nên chỉ hiện mỗi câu hỏi, nên ở mặt trước thì chừa khoảng trống sẽ tốt cho sự tập trung hơn là kẻ đường phân cách.
Nếu bạn muốn xem cách thêm đường phân cách lần đầu, hãy đọc Thêm đường phân cách để tìm đáp án trong một cái nhìn trước. Còn nếu thẻ quá rộng theo chiều ngang làm khó đọc thì xem thêm Chỉnh chiều rộng tối đa của thẻ.