PC Định dạng riêng cho hệ thống footnote và endnote trong epub3

Gần đây mình có tìm hiểu được cách định dạng cho footnote và endnote thông qua id, trước đây thì chỉ biết định dạng theo class.

Như vậy nếu muốn tô màu cho hệ thống chú thích thì phải gắn thêm class, nhưng như thế không cần thiết nữa vì mỗi cái chú thích đều có sẵn id nên ta sẽ tận dụng nó mà không cần thêm bất kỳ class nào nữa.

Đầu tiên ta hãy tạo đặc điểm nhận dạng cho footnote và endnote bằng việc đặt tên cho hệ thống id của hai loại chú thích này khác nhau.


Đặc biệt với cách này chúng ta có thể quyết định footnote và endnote xuất hiện với ký tự gì chỉ bằng việc thiết lập trong css, khi cần thay đổi chỉ phải sửa một ký tự trong css. Vì thế ở giữa thẻ <a> không cần bất cứ ký tự nào, tức là vừa mở thẻ <a> thì đóng thẻ ngay lập tức, ví dụ như hình trên ta thấy chỉ đơn giản là <a...></a> thay vì bình thường là <a...>[1]</a> hay <a...><sup>[1]</sup</a> các kiểu.

Sau đó chỉ cần nhẹ nhàng với vài dòng css như hình dưới ^_^


Như thế là ta có thể định dạng cho bất cứ nhóm phần tử nào có id riêng biệt như thế. Đỡ phải vừa có id vừa gắn thêm class lại cồng kềnh.

Mình đính kèm file mẫu với đầy đủ html và css minh họa của bài viết này ở bên dưới.

CHÚC CÁC BẠN THÀNH CÔNG!