Problem/Motivation

Claro removes text-decoration styling from <abbr> tags, so there is no visual indication that it's an abbreviation.

Screenshot is with Gin but same issue applies:

This is due to a CSS rule in claro/css/base/elements.css line 239 that sets the text decoration to none for abbreviations that have a title (abbr[title]). I think this is unintentional and would have to have a really good reason for removing the expected behavior of a dotted underline (however the effect is achieved). Seems that Claro and normalize.css might be tripping over each other here?

Steps to reproduce

Add an <abbr> tag to any content that is displayed in Claro. See there is no styling of the tag to indicate it is an abbreviation.
The title text <abbr title="My abbr title text">for this abbr</abbr> should appear on hover.

Proposed resolution

Remove the following rule from Claro's styles:

abbr[title] {
  -webkit-text-decoration: none;
  text-decoration: none;
}

Remaining tasks

There should be visual indication for tags.

User interface changes

Abbreviations and acronyms are visibly hover-overable to get tooltip title with their expansion.

Before:

before

After:

after

API changes

None.

Data model changes

None.

Release notes snippet

CommentFileSizeAuthor
#11 3403535-after-safari.png178.17 KBnayana_mvr
#11 3403535-after-chrome.png197.11 KBnayana_mvr
#11 3403535-before.png192.04 KBnayana_mvr
#7 Screenshot 2024-09-16 at 9.13.27 am.png73.05 KBpameeela

Issue fork drupal-3403535

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mlncn created an issue. See original summary.

mlncn’s picture

mlncn commented
Status: Active » Needs review

mlncn opened merge request !5511

nitin shrivastava’s picture

nitin shrivastava commented

Hey @mlncn,
i am not able to replicate this issue can you please provide some steps how to reproduce?

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

@mlncn could you please add before/after screenshots to the issue summary as a UI change

Also steps to reproduce.

smustgrave’s picture

smustgrave commented
Status: Needs work » Postponed (maintainer needs more info)
pameeela’s picture

pameeela commented
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Needs review
StatusFileSize
new Screenshot 2024-09-16 at 9.13.27 am.png73.05 KB

Issue still occurs and fix seems reasonable. Updated IS.

pameeela’s picture

pameeela commented
Issue summary: View changes
pameeela’s picture

pameeela commented
Issue summary: View changes
smustgrave’s picture

smustgrave commented

But the comment

* Fix duplicate border caused by normalize.css adding border-bottom without
* removing the text-decoration.

Are we re-introducing that?

nayana_mvr’s picture

nayana_mvr commented
Issue summary: View changes
StatusFileSize
new 3403535-before.png192.04 KB
new 3403535-after-chrome.png197.11 KB
new 3403535-after-safari.png178.17 KB

I'm able to reproduce this issue on Drupal 11.x and the changes in MR!5511 fixes that. Regarding the comment 

/**
 * Fix duplicate border caused by normalize.css adding border-bottom without
 * removing the text-decoration.
 */

It refers to the file core/themes/stable9/css/core/assets/vendor/normalize-css/normalize.css where the following style is written for abbr[title] :-

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

I verified this in Chrome and safari, but there are no duplicate borders in any of them after this fix. Not sure whether there was any code change in core/themes/stable9/css/core/assets/vendor/normalize-css/normalize.css later.

Noticed that text-decoration works differently in both browsers. Attaching the before and after(chrome and safari) screenshots for reference.

smustgrave’s picture

smustgrave commented

Would be good if we can mark where this was fixed in normalize and thus answer the question of the code being remvoed about duplicate border.

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs issue summary update

So this code was added to core in #3079738: Add Claro administration theme to core in 2019
Normalize.css was updated in #2821525: Update normalize.css to the most recent version in 2020, where believe this was fixed from normalize. Will mark.

tobiasb made their first commit to this issue’s fork.

tobiasb’s picture

tobiasb
Primary language German
Location Berlin
commented
Title: Claro removes default styling from abbreviations (<abbr> tag) » Claro: remove default styling from abbreviations (<abbr> tag)

Scope is claro. But claro does not remove the styling. ;-)

tobiasb’s picture

tobiasb
Primary language German
Location Berlin
commented
Title: Claro: remove default styling from abbreviations (<abbr> tag) » Claro removes default styling from abbreviations (<abbr> tag)

But the css.

nod_ closed merge request !5511

  • nod_ committed 730dc82c on 10.3.x 
    Issue #3403535 by mlncn, tobiasb, nayana_mvr, pameeela: Claro removes...

  • nod_ committed d8e98d67 on 10.4.x 
    Issue #3403535 by mlncn, tobiasb, nayana_mvr, pameeela: Claro removes...

  • nod_ committed 26519bfa on 11.0.x 
    Issue #3403535 by mlncn, tobiasb, nayana_mvr, pameeela: Claro removes...

  • nod_ committed 79a49040 on 11.x 
    Issue #3403535 by mlncn, tobiasb, nayana_mvr, pameeela: Claro removes...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 79a49040099 to 11.x and 26519bfa19a to 11.0.x and d8e98d67400 to 10.4.x and 730dc82cf3d to 10.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.