Có nên gạch chân xung đột với hậu duệ văn bản?

Mô-đun trang trí văn bản của CSS3 bao gồm một thuộc tính vị trí gạch chân văn bản , xác định xem phần gạch chân có nên được định vị bên dưới toàn bộ văn bản hay không:

hoặc ngay dưới đường cơ sở, để cho nó xung đột với hậu duệ văn bản:

Được rồi, tất cả chúng ta đều biết cách gạch chân chỉ nên được sử dụng như là phương sách cuối cùng, nhưng nếu bạn định sử dụng nó, cách phổ biến nhất để làm điều đó là gì? Những ưu và nhược điểm của mỗi phong cách gạch chân là gì?

Điều gì là phổ biến nhất?

Chà, một số người đánh máy sẽ nói rằng gạch chân có lẽ nên tránh tất cả cùng nhau , và gạch chân chỉ thích hợp để sử dụng trên máy chữ hoặc trên các siêu liên kết trên web. Tuy nhiên, tôi sẽ nói thêm rằng sự sáng tạo là về việc nhìn thấy các cơ hội để phá vỡ các quy tắc theo những cách sáng tạo để bạn cho phép hướng dẫn này tùy thuộc vào bạn.

Trên trang web, có nó ngay dưới đường cơ sở, con cháu chồng chéo, là phổ biến nhất. Nhưng điều này chỉ bởi vì đây luôn là kết xuất mặc định cho các trình duyệt chính cho đến thời điểm này.

Trên máy chữ, gạch chân chồng chéo con cháu, nhưng hơi khác một chút: nó nằm một phần giữa hai ví dụ của bạn ( ví dụ ). Nếu bạn nhìn vào đường cơ sở của bộ giảm dần, chẳng hạn như vòng dưới cùng ghoặc serif dưới của p(trong một phông chữ serif), đó là nơi gạch chân nằm. Vì vậy, nó "tham gia với" dưới cùng của con cháu.

Ưu và nhược điểm

Lợi ích của việc có phần trùng lặp gạch chân với con cháu của bạn là nó hoàn toàn không ảnh hưởng đến khoảng cách dòng của bạn (hoặc "hàng đầu") - bạn không phải tăng khoảng cách giữa các dòng để phù hợp với phần gạch chân.

Lợi ích của việc hoàn toàn rõ ràng về con cháu của bạn là khả năng đọc, nếu điều đó quan trọng. Nhưng bạn sẽ có nhược điểm là cần phải tăng khoảng cách giữa các dòng. Nếu tình huống của bạn cho phép có nhiều khoảng cách dòng dù sao đi nữa, thì bằng mọi cách hãy đi cho nó.

Nếu bạn đang sử dụng web, thì gạch chân có liên quan nhiều đến siêu liên kết. Vì vậy, bất kỳ việc sử dụng gạch chân nào cũng nên tránh đối với văn bản không phải là một phần của liên kết. Biểu thị những gì bạn muốn biểu thị theo những cách khác - thay vào đó bằng cách sử dụng chữ in đậm , in nghiêng hoặc TẤT CẢ CAPS.

Tôi tin rằng bất kỳ văn bản được gạch chân nói chung là rất nhỏ đến mức sự khác biệt là không tồn tại đối với người đọc. Đây là một trong những điều mà nhà thiết kế có thể quan tâm rất nhiều , nhưng độc giả không bao giờ làm. Theo tôi, đó là một sự lựa chọn phong cách hơn.

Tôi rất thích định vị đường cơ sở với sự nghỉ ngơi ở hậu duệ: tức là text-decoration-skip: ink;, điều đó hiện không thực sự được hỗ trợ. Tôi đã đi xa đến mức có hai lớp và thêm một khoảng cho con cháu để xóa phần gạch chân khỏi chúng. (văn bản thay thế thông qua php để nó không có nhiều mã để tạo).

Tôi sẽ không bao giờ sử dụng thủ thuật viền dưới (hoặc thuộc tính dưới cùng) vì phần bù. Tôi thấy, với các độc giả của tôi, phần bù của phần gạch chân là rất xa, rất xa, gây mất tập trung cho họ hơn bất cứ thứ gì.

Tôi cố gắng và chuyển sang in đậm, in nghiêng, in nghiêng đậm hoặc thay đổi màu sắc, thay vì gạch chân bất cứ khi nào có thể.

Các mô tảtext-decoration: underline trong CSS 2.1 đặc tả định nghĩa ảnh hưởng của nó cũng giống như gạch dưới, không có chi tiết, nhưng các trình duyệt thực hiện nó như xuất hiện chỉ là một chút dưới đường cơ sở. Vì vậy, nó thường cắt giảm hậu duệ (và dấu phụ được đặt bên dưới một chữ cái).

Trong dự thảo Văn bản CSS3, có text-underline-positionvị trí, nhưng dường như nó không được hỗ trợ bởi bất kỳ trình duyệt nào. (Theo thông tin của css666.com , nó được IE hỗ trợ, nhưng ít nhất trên IE 9, sự hỗ trợ dường như bị giới hạn trong việc nhận ra thuộc tính và chấp nhận giá trị auto, giá trị ban đầu - vì vậy nó thực sự không hỗ trợ.) Cập nhật : Trên thực tế , IE (từ phiên bản 6) có thêm một chút hỗ trợ , nhưng nó thực sự cho phép bạn chỉ cần đặt phần gạch chân phía trên văn bản (!) Và không nằm dưới nó.

Như được mô tả trong câu trả lời của Scott và bình luận của Joonas, bạn có thể sử dụng đường viền dưới cùng để mô phỏng một đường gạch chân, và sau đó bạn có quyền kiểm soát khá tốt đối với kiểu gạch chân gạch chéo. Điều này có thể phù hợp, ví dụ như đối với các liên kết được gạch chân tự đứng, không phải nội tuyến. Đối với văn bản nội tuyến, nơi bạn có thể muốn gạch chân, ví dụ như vì bạn là vấn đề in HTML-izing có gạch chân, gạch chân CSS bình thường có thể tốt hơn - bởi vì gạch chân ít nhiều tương ứng với truyền thống in.