5 ms·
Towards a more perfect link underline
- deleted 12y ago[deleted]
- mmphosis 12y agoI don't usually use mobile and my monitors are not stacked tall enough yet to avoid scrolling. I often struggle with pages that have a fixed heading and scrolling body that doesn't usually seem to scroll the correct amount and the header blocks the top part of what I am reading. I think that overlay of translucent links works quite well. It doesn't detract from what I am reading, maximizes the vertical height, and scrolls correctly.
- zkhalique 12y agohttp://research.microsoft.com/en-us/um/people/lamport/pubs/buridan.pdf http://research.microsoft.com/en-us/um/people/lamport/pubs/b... The whole premise of this paper about Buridan's ass principle is wrong. That is to say, its assumption of continuity. A simple strategy of "always go to the right after you haven't made a firm decision after X time" leads to a discontinuous function, violating their assumption. It is trivially possible for strategies to lead to discontinuous decision functions, undermining the whole idea. The author tries to report that "you aren't sure if you've decided or not after X time", but doesn't go very deeply into it, and clings to the assumption of continuity. In fact, one can always be sure whether they've made a FIRM decision or not by a certain time, in the same way the author has X_t(1) = 1 for all t.
- wcarss 12y agoI think this may belong in a different submission.
- mattxxx 12y agolgtm I really like the selection color-change, but I'm not sold on the actual CSS :/ It's too bad line-height doesn't work so great, because that feels like a great solution.
- acusti 12y agoDo you mean border bottom in conjunction with reduced line-height as a solution for link underlines? Or something else?
- mattxxx 12y agoYes, I meant border-bottom in conjunction with line-height. It feels more connected to the idea of "underline" than adding a line-gradient.
- wmeredith 12y agolgtm?
- notduncansmith 12y ago"Looks good to me". It's a shorthand commonly seen in comments on pull requests.
- TheLoneWolfling 12y agoI 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 agoFair 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 agoI 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 agoYes, 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 agoThat'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; }
- jamesgagan 12y agoanother recent blog post on this topic with some nice examples: http://eager.io/blog/smarter-link-underlines/ http://eager.io/blog/smarter-link-underlines/
- acusti 12y agoBeautifully illustrated post! Thanks for sharing.
- jamesmcq24 12y agoJust seems a little nit-picky to me. I can't help thinking there are more important things to implement than little gaps around letter descenders and configurable line thickness in text underlines...
- psychometry 12y agoJust because there are more important things to do worry about than one particular thing doesn't mean no one on earth should worry about that thing until everything else is fixed. I really need to vacuum my car, but maybe I should hold off until we resolve the Ebola outbreak?
- jamesmcq24 12y agoI'm not sure that example is the same, I'd say a better example would be "I really need to fix the giant hole in my roof, but maybe I should hold off until I find the perfect position of the pillows on my bed" EDIT: But sure, the fact that there are other things to do doesn't mean no one should worry about anything else. I just feel like this is one of those things that doesn't really make any meaningful change, add any value, etc. Like I said, just seems like nit-picking. To each their own.
- JoshTriplett 12y agoI actually do find this to be an improvement for underlining of text as a visual style, such as for emphasis or headings. (Which you should never do on the web, specifically because "underline" means "link" and nothing else; however, in non-hypertext, underlining can work as a visual style.) However, as a style for links, it has a sufficiently different style that I find it distracting, both from . appearing far too faint to stand out, and from introducing breaks in the line. It isn't nearly as bad as sites that hide link underlines entirely, however.
- username223 12y agoAnyone whose website looks like this [1] has no business complaining about underlines. [1] http://i.imgur.com/Y1MAsHt.png http://i.imgur.com/Y1MAsHt.png
- harlanlewis 12y agoI actually tried to reproduce that screenshot. Consider me trolled. If your intention was to be helpful in any way (always a safe assumption with username223), you could have at least said what browser you use.
- username223 12y ago> If your intention was to be helpful in any way (always a safe assumption with username223), you could have at least said what browser you use. In a half-hearted attempt to atone for my sins... My browser is Safari blocking some JavaScript and most ads. Your floating header-menu-thingy is completely transparent, but won't disappear. Floating headers generally break page-down, so they're a terrible idea. But if you use them, at least make them opaque so people can figure out the breakage.
- harlanlewis 12y agoThank you for details! I'm not the article author or site creator, I'm just OCD about the myriad ways a seemingly simple page can fail to render.
- deleted 12y ago[deleted]
- acusti 12y agoSorry if I gave the impression I was complaining about underlines. My personal website is a playground for ideas; it is not a product anyone payed me to build, and it is not intended to sell anything. The fixed semi-transparent nav is an attempt to balance my annoyance with fixed navs that break page down/page up functionality with the utility of having quick access to useful links (use case being “interesting post, who is this person?” or “what else have they done?”). I don’t love it, and it’s pretty bad at mobile widths, but it has the distinct advantage of preventing readers from losing their place when paging. Another commenter picked up on that: https://news.ycombinator.com/item?id=8679336 https://news.ycombinator.com/item?id=8679336 Anyways, I appreciate the criticism. Though I heartily disagree that as a result of that expirement, I cannot write about improving text underlining on the web.
- zobzu 12y agoI find the "regular" underline a LOT more readable and ensure im seeing an hyperlink... IMO readability should always trump "being pretty".
- smorrow 12y agoEspecially since "pretty" often means tacky or garish. I see alot of comments in here where people like the look of the thing but don't like the gaps in the context of something you're going to click on. Me, I just don't like the look. itself. For some reason, my eye is seeing the text as being "in front" of the underline, instead of the desired effect which would be the underline getting out of the text's way.
- SixSigma 12y agoI still prefer Wired's transparent ones see examples http://www.wired.com/2014/11/2014-physics-gift-guide/ http://www.wired.com/2014/11/2014-physics-gift-guide/