Making WordPress.org

Opened 3 years ago

Closed 8 months ago

#5970 closed defect (bug) (fixed)

The list of function name isn't readable properly.

Reported by: rima1889's profile rima1889 Owned by:
Milestone: Priority: normal
Component: Developer Hub Keywords: needs-design-feedback
Cc:

Description

I'm finding below issue on https://developer.wordpress.org/reference/functions/.
1) The style of function name hide underscore(_) because of style of underline( text-decoration: underline ).
2) The underline also display out of Functions name.

Change History (6)

#1 @rima1889
3 years ago

  • Keywords needs-design-feedback added; has-screenshots needs-design removed

#2 @dd32
3 years ago

  • Component changed from WordPress.org Site to Developer Hub
  • Keywords has-dev-note dev-feedback removed

There's a potential that it's intended not to have underlines here, as there's already a dotted underline set on the :hover.

I do actually have a uncommited diff to remove this underline already, but didn't move forward with it myself as it only fixes the function listing, and not all the other locations where function/class names are referenced as links with an underline (For example Return Values, and Related functions on individual function pages)

  • scss/main.scss

     
    10631063                        .arg-default {
    10641064                                color: #000000;
    10651065                        }
    1066                         a:hover {
    1067                                 border-bottom: 1px dotted #21759b;
     1066                        a {
     1067                                text-decoration: none;
     1068
     1069                                &:hover {
     1070                                        border-bottom: 1px dotted #21759b;
     1071                                }
    10681072                        }
    10691073                }
    10701074                h2 {

#3 follow-up: @ryelle
3 years ago

Ideally links should have more than just color to differentiate them from surrounding text, so rather than removing the text-decoration, maybe try text-underline-offset? 0.2em seems like a good distance in playing with it in Inspector.

#4 in reply to: ↑ 3 @dd32
3 years ago

Replying to ryelle:

Ideally links should have more than just color to differentiate them from surrounding text

Totally agreed.

maybe try text-underline-offset?

I didn't even know that was a thing :) That sounds like a perfect solution to me.

Perhaps we could use something like a.underscores { text-underline-offset: 0.2em; } and apply that class where needed instead of trying to target things purely in CSS?

#5 @ryelle
3 years ago

I think the 0.2em offset is small enough that it would be fine to drop onto .devhub-wrap .site-main a for all devhub links, but a has-underscores class could be useful elsewhere (or underscores, IDK if we have a naming standard either way).

#6 @coffee2code
8 months ago

  • Resolution set to fixed
  • Status changed from new to closed

Fixed in c7b879e on GitHub back in May 2022. The underline was removed in the manner Dion proposed in comment 2.

Note: See TracTickets for help on using tickets.