Defect #44069
closed
Remove redundant underline from abbr elements
Description
The rule for abbr already applies a dotted bottom border as a visual hint:
abbr, span.field-description[title] {
border-block-end: 1px dotted var(--oc-gray-5);
cursor: help;
}
However, browsers apply text-decoration: underline dotted to abbr elements by default, resulting in two overlapping dotted lines being rendered.
Adding text-decoration: none to the existing rule would suppress the browser default and eliminate the duplication.
Files
Updated by Mizuki ISHIKAWA 22 days ago
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 62a63b212..de32be881 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -862,6 +862,7 @@ hr { inline-size: 100%; block-size: 1px; background: var(--oc-gray-4); border: 0
blockquote { font-style: italic; border-inline-start: 3px solid var(--oc-gray-3); padding-inline-start: 0.6em; margin-inline-start: 0;}
blockquote blockquote { margin-inline-start: 0;}
abbr, span.field-description[title] { border-block-end: 1px dotted var(--oc-gray-5); cursor: help; }
+abbr { text-decoration: none; }
textarea.wiki-edit {inline-size: 99%; resize: vertical; box-sizing: border-box;}
body.textarea-monospace textarea.wiki-edit {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
body.textarea-proportional textarea.wiki-edit {font-family: var(--fonts-main);}
Updated by Go MAEDA 21 days ago
- File 44069.patch 44069.patch added
- Subject changed from Remove duplicate dotted underline on abbr to Remove redundant underline from abbr elements
- Target version changed from Candidate for next minor release to 6.1.3
Thank you for reporting the display issue.
In addition to the fix you proposed by adding text-decoration: none;, I think it would also be better to change the abbr selector to abbr[title]. Normally, web browsers only display an underline for abbr elements when they have a title attribute. With the current selector targeting all abbr elements, the border-block-end underline is also applied to abbr elements without a title attribute.