61

All the hyperlinks in the Post and Comments in the site are displaying with an underline. Sample link. Previously the hyperlinks are displaying without an underline.

While edit the post, in the "preview mode" the hyperlinks are displaying without an underline. So I hope, it is a bug.

The issue can be reproduced in recent Google Chrome and Mozilla Firefox browsers.

Screenshot for reference:

underline links

When inspect the element for the hyperlinks, the text-decoration: underline is applied for the post and comment's <a tag. That caused an underline issue.

.post-text a, .comment-copy a {
    text-decoration: underline;
}

CSS issue

Update: As Floern mentioned in the comments, the tag link in the posts are also have an underline.

tag link in the post

21
  • Repro-ed in both Edge and Chrome also reported in Chat chat.meta.stackexchange.com/transcript/message/7169741#7169741
    – rene
    Commented Aug 17, 2018 at 11:11
  • 5
    And Firefox ESR.
    – robinCTS
    Commented Aug 17, 2018 at 11:13
  • MSO dupe meta.stackoverflow.com/questions/372688/…
    – Suraj Rao
    Commented Aug 17, 2018 at 11:32
  • 23
    What is the problem with underlines? There are people out there who find the contrast between this blue link color and the main text color to be not high enough to see them easily. Underline is a style independent of color and therefor perfect for color blind people. In regards of links with link texts different than URLs this is a nice additional way to highlight clickable elements in texts Commented Aug 17, 2018 at 11:36
  • 6
    It would be nice if we could customize our skins. It would be nice if the people who run Stack Exchange did not simply impose their choice of UI on all the users, like it or lump it.
    – Tom Zych
    Commented Aug 17, 2018 at 11:42
  • 3
    Now I'm missing the lines under all the other clickable things like user names. Commented Aug 17, 2018 at 11:43
  • 7
    Let's get back to basics. Who honestly needs google fonts?
    – user284374
    Commented Aug 17, 2018 at 11:51
  • 3
    I see you missed the 90's.
    – Mauker
    Commented Aug 17, 2018 at 11:57
  • 7
    It's definitely a bug. Some links have an underline, some don't. And tag links (with [tag:foobar]) in posts also have an underline (example), which looks completely wrong.
    – Floern
    Commented Aug 17, 2018 at 12:26
  • 4
    @TomZych Any website "imposes" their choice of UI on all the users. That's how it works. We can't poll 100m visitors/members across the network on every chance. We can listen to feedback and consider it. That's exactly what we did in this case for the reasons Aaron explains.
    – Joe Friend
    Commented Aug 17, 2018 at 16:24
  • 14
    @JoeFriend Running the site, you have all the right to impose things you deem appropriate. You already do and people will deal with it. But at least some kind of announcement would have been appreciated for such a major design change. I mean, users filed genuine bug reports for this to find out what was even going on. After all the talk about improving communication (and the myriads of other announcements for new design features), I have to wonder if someone just accidently pushed the "release" button a little too early here. Commented Aug 17, 2018 at 16:39
  • 1
    @ChristianRau I agree this is a highly visible change, but it isn't a "major" change. A new theme is a major change. We're in the midst of a well announced theme change across the network. Maybe I should post something to clarify that changes like this will be continuing until we have the new unified theme in place across all sites.
    – Joe Friend
    Commented Aug 17, 2018 at 16:47
  • 9
    @JoeFriend In the past, the SE team used to announce changes either in advance of or immediately after the change was made. Now, there are no such announcements, leaving users to get confused and ask. Commented Aug 17, 2018 at 17:30
  • 15
    @JoeFriend My impression right now is that a lot of folks are . . . not hugely happy with some of the site themes, and there's been controversy over some other recent changes. With the general mood of frustration at what some people see as a lack of communication, even stuff that might seem minor is becoming important. What I think people are looking for is for SE to be as open and explicit as possible, even about stuff like this. It's a good way for everyone to build trust in the process.
    – HDE 226868
    Commented Aug 17, 2018 at 18:59
  • 4
    @HDE226868 Fair enough. I'm having a conversation with the team on how best to make this happen. I don't think everything warrants a meta post or the conversation that follows. Maybe a change log would be a good intermediate step.
    – Joe Friend
    Commented Aug 17, 2018 at 19:29

5 Answers 5

-8

This is not a bug. It is intended behavior. We've intentionally added underlines to links in posts and comments for contrast and accessibility reasons. Many of our themes' primary colors don't deviate much from the text color itself, so we went with the classic way of showing a link's a link.

Tags shouldn’t take an underline, nor should previews. Those will fixed in follow-up commits. As you can likely tell, our CSS is very much considered legacy code and it can be hard to capture all the edge cases in a single go 😂.

22
  • 72
    I honestly dislike this intentional change. It is ugly.
    – rene
    Commented Aug 17, 2018 at 15:35
  • 77
    I really appreciate the explanation, but I have to say, I find the underlines pretty distracting. Now my eyes go immediately to the link, instead of the sentence it's embedded in. Could we simply have better contrast with text colors?
    – HDE 226868
    Commented Aug 17, 2018 at 15:45
  • 9
    A while back we asked for better contrast on Mi Yodeya meta and got underlines instead. They were initially a little jarring but I got used to them pretty quickly. Better contrast would still be better because it seems like the web is generally moving away from underlining links, but in the absence of better colors, I'd rather have underlining than nothing. (And frankly, given how much of the design world seems to think that super-light gray text on a white background is usable, I'm not sure we can rely on good color choices everywhere. Though we should still try.) Commented Aug 17, 2018 at 17:20
  • 6
    I guess I'm the weird guy, but I like the change. There are two clear advantages here that I can directly see. 1. It makes it clear for users who use night mode on phones. 2. It helps to catch spam in punctuation. Commented Aug 17, 2018 at 17:24
  • 2
    We're supposed to have underlines for links in comments, just having fun with legacy CSS :) Commented Aug 17, 2018 at 17:56
  • 14
    @ivan_pozdeev Some of the CSS that powers Stack Overflow is approaching 10 years old. I'm not saying CSS is legacy, I'm saying our CSS is legacy. Commented Aug 17, 2018 at 19:31
  • 3
    Can the underlines be turned off in the settings of an individual's account? People should be able to have a choice
    – dylnan
    Commented Aug 18, 2018 at 1:46
  • 11
    Accessibility should be settings, not defaults. Colouring is the default way to show that a link is a link. If someone has difficulty differentiating that, they'll probably have difficulty everywhere, thus they'll probably have a browser extension, or know to start off customising site settings. Commented Aug 18, 2018 at 12:46
  • 20
    I'm still having trouble identifying what I can click on. Can we underline the other links as well? Commented Aug 18, 2018 at 12:58
  • 3
    @AaronShekey Just wanted to thank you for responding promptly to this post and elsewhere. I don't love the change either, but it's great to hear back quickly about this being an intentional change and the reasoning behind it. Commented Aug 18, 2018 at 16:08
  • 7
    It looks pretty nice to me on most SE sites, but on Stack Overflow in particular, it's horrible. First, many people use lots of inline links in the middle of sentences to point you to reference docs that you probably don't need but might; the color made this the perfect amount of findable but unobtrusive, but the links make it looks hideous. Second, because even links in code_ticks are underlined, it obscures the proper names of functions in any languages that use snake_case instead of camelCase.
    – abarnert
    Commented Aug 19, 2018 at 3:26
  • 32
    "Many of our themes' primary colors don't deviate much from the text color itself." Maybe that's a sign that you need to design themes that offer a way to show contrast that's more visible?
    – abarnert
    Commented Aug 19, 2018 at 4:09
  • 8
    I will not call it "ugly" to not offend those who did it, but I do see it as a very big step backwards, old fashioned design, and design which does not appear to be professional. All in my own opinion. This is very major design change, and the fact you just did it without asking for opinion first is also a big hit. (Not you personally! The management.) Commented Aug 19, 2018 at 8:52
  • 6
    @unor "Default" as in "the way most / all sites I use do it". I'm not really too concerned about what some spec no-one follows says. Commented Aug 19, 2018 at 8:57
  • 2
    I think this is a very good and valuable change that's a significant improvement to accessibility. Hold strong!
    – Jeremy
    Commented Sep 22, 2018 at 1:07
38

It strikes me that this problem might be SO-specific, and I realize SO is just one site among many—but it's a pretty important one.

One most SE sites, from SciFi to Super User, there just aren't a lot of inline links. Some, like MSO and MSE, have a lot more links, but they tend to come in bulleted lists, which actually look great with the underlines.

But on SO, inline links are a lot more common. And they're often used to provide a link to reference docs that the reader probably won't need, but might.

The way the site has looked for the last 9 years, linking a code name or a few short words gave you exactly the right level of visible-but-not-intrusive that you're looking for. Now, the underlines jump out as if they were the most important thing in the answer. Look at this example from David C. Rankin:

fragment from answer about <code>main</code> in C

With the old style, the first thing I noticed were int main(void) and int main(int argc, char **argv).

With the new style, the first thing I notice is a link to the C11 standard. Which does, admittedly, give that information, but it's off-site, and not exactly novice-friendly.

It's also now impossible to tell .DS_Store and .DS Store apart. There's already a question about that specific problem on MSO.


While we're at it… From Aaron Sheckley's answer:

We've intentionally added underlines to links in posts and comments for contrast and accessibility reasons. Many of our themes' primary colors don't deviate much from the text color itself, so we went with the classic way of showing a link's a link.

From Joe Friend's comment:

We're in the midst of a well announced theme change across the network.

So, I understand, you're retheming everything, and the new themes don't offer sufficient opportunities for contrast. In fact, I can see that on the MSO page I linked above:

There is none more grey.

Unvisited links are fine, but visited links are a grey that's barely distinguishable from black, and visited links inside a quote or code block are grey on slightly different grey…

But I don't think underlining is the right answer.

When we redesigned the car's dashboard to be slate on grey, we couldn't read the speedometer anymore. So we made it blink.

Sure, now you can see your speed more easily, but it's also distracting you from more important things, like the traffic through the windshield. And the right answer is obviously to scrap the slate-on-grey design and come up with something that actually allows for contrast to be used as a visual cue, isn't it?


As pointed out by poke and others, there are other sites that do tend to use lots of inline links in a way similar to many StackOverflow answers. Poke suggested Wikipedia, but I think an even better example is WikiWikiWeb, the original wiki, which was focused on programming-related topics (originally specifically on "design patterns"). At any rate, both of them default to hover-only underlines plus an easily-visible color contrast (in the default theme, they follow the standard color scheme of blue for unvisited links, purple for visited links, which contrasts nicely with black for non-links on their white background). You can look at ancient versions of the c2 wiki on the Wayback Machine, when they did underline links, and the underlines are distracting.

For comparison, here's the Wikipedia page on Design Patterns:

Wikipedia software design patterns

… vs. the original version of the c2 page before they stopped underlining links:

wayback c2 DesignPatterns


4
  • 3
    I agree with this. I have a tendency to add inline links to Wikipedia or an online database if I'm referencing terms or objects that someone might not know, in cases where adding a full description would be lengthy and largely irrelevant to the answer at hand. It's not important for the link to pop out at people so much; it's there as a very much secondary resource.
    – HDE 226868
    Commented Aug 19, 2018 at 15:46
  • Thank you, the contrast ratio is way worse than the fact that links are not underlined (I'm used to that, messing with css to make it so I can even see links as links I am not). A 3:1 (bbc I know recommends 4.5:1 for small text) contrast ratio would be way more helpful. Commented Aug 20, 2018 at 2:07
  • 1
    I agree. The underline adds too much focus on the link itself, instead of focusing on the actual content. With well written answers, links that are embedded inside of the answer are only additional references which technically aren’t necessary (since answers should still be valid when you take out all links). And for that, the new styling is making them far too prominent. – Btw. I think we are similar to Wikipedia here which also cross-links other terms as a way to provide additional information and also doesn’t underline links. If they did that, Wikipedia probably wouldn’t be very usable.
    – poke
    Commented Aug 20, 2018 at 18:38
  • 1
    @poke Good point about Wikipedia. It’s also worth looking at the c2wiki, which was the first-ever wiki, focused on programming-related stuff, and tended to have a lot of inline links in a way pretty similar to SO answers. They originally had underlined links, and got rid of them after a few years because they were distracting.
    – abarnert
    Commented Aug 20, 2018 at 18:51
22

This change creates more issues with underlined code (besides those mentioned in this answer), as mixed code/normal text looks like two separate links.

For example:
"In Java, objects default to null"

Here null looks like it points to something totally separate than "default to", as there's a break in the underline.

Removing underlines from code as suggested here would only exacerbate this issue, but it looks pretty bad as it is.

2
  • 4
    In ObjC, one can use nonnull or __nonnull, but not _nonnull
    – Cœur
    Commented Aug 20, 2018 at 9:49
  • 4
    SE: please pay attention to this! This change breaks code in links on all the programming sites. So you have now completely defaced hundreds of thousands of links all over the SE network. This feature needs an immediate rollback until fixed!
    – Lundin
    Commented Aug 20, 2018 at 9:55
5

The change was obviously motivated by a desire to make hyperlinks more obvious:

  • In some color schemes, hyperlinks were only slightly a different color from regular text (e.g. at Meta StackOverflow, visited links were grey) making them hard to tell apart from the surrounding text.
  • The underline clearly distinguishes a hyperlink from regular text, and also shows the end of one hyperlink and start of another.

Whatever alternative solution is proposed, it should probably address these points to be acceptable.

2
2

Currently underlines are appearing for hyperlinks in the post's comments section, but where as the comments in the Activity -> responses -> comments section are appearing with out an underline.

For the uniformity, in both places the underline for the hyperlinks expected to be same.

Screenshot for reference:

In post's comments section (with underline):

Post comments

In Activity -> responses -> comments section (with out underline):

Response comments

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .