4 ms·

I really do not like this. It breaks the assumption (wrong word? Intuitive guess?) that one underline == one link. Which means that every time I look at the l

I really do not like this. It breaks the assumption (wrong word? Intuitive guess?) that one underline == one link. Which means that every time I look at the link I do a doubletake trying to figure out why there are 6+ links in that word.

acusti 12y ago
Fair enough. Of course, the counterpoint is that for others who do not have that particular reaction, the overall effect of having less intersecting lines (better separation between characters and text decorations) is one of less clutter, and, arguably, heightened readability.
wmeredith 12y ago
I see your point, but I have a counter assumption that individual letters without spaces between will not ever be linked that cancels it out for me.
- bobbykjack 12y ago
  Yes, pretty poor usability to link two words only separated by a space, but terrible usability to extend that to linking two adjacent characters separately.
dredmorbius 12y ago
That's among the reasons I generally ad an on-hover very slight background color shift to links. It allows me to see what the boundaries of a link are before clicking it. I also dispense with the underline on links by default. The following is from what I call my "unstyled" CSS -- I'll apply it to bare-bones HTML websites. a { color: #1e6b8c; text-decoration: none; transition-property: color, background-color; transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0.1s; } a:visited { color: #6f32ad; } a:hover { text-decoration: underline; background: #f0f0ff; } a:active { background-color: #427fed; color: #fffff6; }
- danielnixon 12y ago
  Your a:hover styles should also be applied to a:focus [0]. You might also want to read about why using only color to differentiate links is bad practice [1]. [0] http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/ http://www.456bereastreet.com/archive/201004/whenever_you_us... [1] http://www.w3.org/TR/WCAG20-TECHS/F73.html http://www.w3.org/TR/WCAG20-TECHS/F73.html
  - dredmorbius 12y ago
    Most of my work has a single highly specific consumer: me. I'll restyle websites to remove distractions and improve clarity, focus, and readability. I do this very nearly as casually as breathing now (Chrome, Element Inspector, and Stylebot FTFW). If you'll apply those styles to a page, you'll find that: * Links are colored. Blue colorblindness is quite rare. That's arguably a far better choice than the orange/red links I'm seeing more frequently now. For myself, I find underlines distracting. * On hover they're underlined and the background cover shifts. * On click, foreground and background colors are inverted. Your point on :focus vs. :hover is probably well-taken, though those have been equivalent for my use. I've encountered a number of sites with disappearing sub-menus (themselves an arguably broken UI element), where the rule for visibility is :hover of the/a parent element. Which means that when the pointer moves off the parent and onto the submenu, the submenu disappears. LinkedIn has been exhibiting this recently.
psychometry 12y ago
Maybe there's something wrong with your browser. The underline style is only interrupted slightly for descenders. It continues through spaces and other punctuation like it does normally. It looks nothing like a phrase with each word underlined individually.
- garrettgrimsley 12y ago
  There's nothing wrong with their browser, they are talking about a single word, not phrase, being composed of multiple links. As HN does not support markup I'll attempt to demonstrate with underlines. Imagine that each slice seperated by underlines is a seperate link. _Su_p_ercalifra_g_alisticex_p_ialdocious_
  - psychometry 12y ago
    The only characters that introduce separation in a standard typeface are the ones with descenders: q, y, p, g, j, and some punctuation characters. I have no idea why you think i_f, r_a, c_e, or almost any of the other pairs of letters in your example would have a discontinuous underline.
    - garrettgrimsley 12y ago
      Edited, better? They are saying that currently if there is a break in the underline it is understood that the two underlined portions of the word are two different links.
HackinOut 12y ago
When looking at the example, it did not grasp my attention because it's rare to have links broken in the middle of a word. It did though with words starting with the letter y for example. Too bad because it looks awesome. Worth noting that a continuous line can hide several links. The security conscious that likes to hover links before clicking them know this well, hence I always appreciate the use of a css :hover that would also somewhat attenuate that problem. (http://jsfiddle.net/46qvv6kn/ http://jsfiddle.net/46qvv6kn/)
dec0dedab0de 12y ago
I don't like it either, but mostly because descenders, are supposed to go through the line. That's one of the first things you learn in kindergarden when you're learning to print.

acusti 12y ago

Fair enough. Of course, the counterpoint is that for others who do not have that particular reaction, the overall effect of having less intersecting lines (better separation between characters and text decorations) is one of less clutter, and, arguably, heightened readability.

wmeredith 12y ago

I see your point, but I have a counter assumption that individual letters without spaces between will not ever be linked that cancels it out for me.

bobbykjack 12y ago
Yes, pretty poor usability to link two words only separated by a space, but terrible usability to extend that to linking two adjacent characters separately.

dredmorbius 12y ago

That's among the reasons I generally ad an on-hover very slight background color shift to links. It allows me to see what the boundaries of a link are before clicking it. I also dispense with the underline on links by default. The following is from what I call my "unstyled" CSS -- I'll apply it to bare-bones HTML websites. a { color: #1e6b8c; text-decoration: none; transition-property: color, background-color; transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0.1s; } a:visited { color: #6f32ad; } a:hover { text-decoration: underline; background: #f0f0ff; } a:active { background-color: #427fed; color: #fffff6; }

danielnixon 12y ago
Your a:hover styles should also be applied to a:focus [0]. You might also want to read about why using only color to differentiate links is bad practice [1]. [0] http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/ http://www.456bereastreet.com/archive/201004/whenever_you_us... [1] http://www.w3.org/TR/WCAG20-TECHS/F73.html http://www.w3.org/TR/WCAG20-TECHS/F73.html
- dredmorbius 12y ago
  Most of my work has a single highly specific consumer: me. I'll restyle websites to remove distractions and improve clarity, focus, and readability. I do this very nearly as casually as breathing now (Chrome, Element Inspector, and Stylebot FTFW). If you'll apply those styles to a page, you'll find that: * Links are colored. Blue colorblindness is quite rare. That's arguably a far better choice than the orange/red links I'm seeing more frequently now. For myself, I find underlines distracting. * On hover they're underlined and the background cover shifts. * On click, foreground and background colors are inverted. Your point on :focus vs. :hover is probably well-taken, though those have been equivalent for my use. I've encountered a number of sites with disappearing sub-menus (themselves an arguably broken UI element), where the rule for visibility is :hover of the/a parent element. Which means that when the pointer moves off the parent and onto the submenu, the submenu disappears. LinkedIn has been exhibiting this recently.

psychometry 12y ago

Maybe there's something wrong with your browser. The underline style is only interrupted slightly for descenders. It continues through spaces and other punctuation like it does normally. It looks nothing like a phrase with each word underlined individually.

garrettgrimsley 12y ago
There's nothing wrong with their browser, they are talking about a single word, not phrase, being composed of multiple links. As HN does not support markup I'll attempt to demonstrate with underlines. Imagine that each slice seperated by underlines is a seperate link. _Su_p_ercalifra_g_alisticex_p_ialdocious_
- psychometry 12y ago
  The only characters that introduce separation in a standard typeface are the ones with descenders: q, y, p, g, j, and some punctuation characters. I have no idea why you think i_f, r_a, c_e, or almost any of the other pairs of letters in your example would have a discontinuous underline.
  - garrettgrimsley 12y ago
    Edited, better? They are saying that currently if there is a break in the underline it is understood that the two underlined portions of the word are two different links.

HackinOut 12y ago

When looking at the example, it did not grasp my attention because it's rare to have links broken in the middle of a word. It did though with words starting with the letter y for example. Too bad because it looks awesome. Worth noting that a continuous line can hide several links. The security conscious that likes to hover links before clicking them know this well, hence I always appreciate the use of a css :hover that would also somewhat attenuate that problem. (http://jsfiddle.net/46qvv6kn/ http://jsfiddle.net/46qvv6kn/)

dec0dedab0de 12y ago

I don't like it either, but mostly because descenders, are supposed to go through the line. That's one of the first things you learn in kindergarden when you're learning to print.