Crafting link underlines on Medium | Hacker News Reader

Crafting link underlines on Medium

medium.com

44 pointsrtpg21 comments

Maybe now they can spend a month working on a way to get Medium to render—at all—in Safari. I'm sure it's an interaction with some script blocker I run, but about half the pages just end up blank except for header and footer.

To me this is what is annoying about Medium on a technical level. Everything has to be too pretty by half, resulting in a brittle website where things are constantly fading in and out of view while a gentle breeze comes forth from my laptop fan.

Sufficiently well-written articles don't require a sumptuous bubble bath of design, complete with scented candles and Keith Sweat record, to set the atmosphere for me. I can probably live with the results if you only spent two weeks on the underlines. Just show me the damned text already.

Agreed. Nothing about the Medium frontend (despite its prettyness) requires JS at all. I'm not sure why it wouldn't be completely compatible across the board.

Which ones are you running? With Ghostery alone, everything works on my end.

All I have running is Ghostery, too. A page like this loads with header and footer intact, but no rendered text:

https://medium.com/@cshirky/last-call-c682f6471c70

The problem is that Medium isn't as well-designed as they market it; I remember when the font size was even bigger than it already is, and I can find plenty of places with much better readability than Medium.

If you block referrers, Typekit won't load and you'll end up with a blank article until it times out (either 5 or 10 seconds) and falls back to the default font.

Try waiting a bit and seeing if it loads. I agree that this is incredibly annoying, though.

Ironically, on OS X Yosemite their underlines look worse than the default OS X rendering.

OS X now correctly leaves gaps in underlines around letter descenders [1], and Medium's CSS underline style breaks that.

[1]: Example: http://i.imgur.com/rXBvmbx.png

I greatly enjoy obsessively detailed articles like this, but why is there not a single mention of either hover, visited or focus styles? They're as much part of crafting a link and currently none of the links in the text give any visual indication on hover.

Default browser behavior (OS X Safari) of cursor changing from an arrow to a hand on hover is a visual indication. Default browser behavior of links with focus having a blue outline is a visual indication.

If unvisited links aren't in the default browser color (e.g. blue), I don't want a site to attempt a "house style" for visited links. Don't make me think.

It's a shame that the solution isn't shared and isn't public.

If they've a cross-browser and widely supported way of making underlines in text be more readable, then it would be great if they offered this knowledge to the wider web by sharing it, as readability is an issue that affects everyone.

My quick attempt: http://jsfiddle.net/41s1wqhs/

Only tested on OSX.

Tried to make it work on links and couldn't. Care to give it a try?

This works for me http://jsfiddle.net/41s1wqhs/7/

I am sorry I did not explain myself well. I meant it without the H1, a regular link on a paragraph.

Ah, right. http://jsfiddle.net/41s1wqhs/19/

I should note that this means links that span multiple words wont break. That can easily be fixed with a little more effort though. My point is this is concept is very easy to do with css, especially when you have control of the exact font and size it's rendering in, like Medium does.

Excellent, thanks!

Here: http://jsfiddle.net/41s1wqhs/18/

Links are blue, and turn red on hover.

What I like most about Medium, in terms of design interaction, is the ability to comment any part of the text.

Is there any open source blog engine that has that feature?

This reminds me of the UI ideas of Doug Engelbart, like purple numbers[1] (a unique ID and link for each paragraph of text so it's easy to refer to the exact bit of text from other sources).

[1]:http://eekim.com/software/purple/purple.html

It's not a blog engine, but NYT's Emphasis library does implement deep linking & highlighting of specific sentences.

https://github.com/NYTimes/Emphasis

I swear that the first time I had ever seen it was in the Djangobook, but I just went to view it for the first time in years, and it doesn't seem to have that functionality. Starting to wonder if I had imagined it.

On a related note, after I started using a Mac, I have found that there are cases where I won't even be able to detect a link, because the underline is so hard to see in the first place, so I have decided to use `background-color` for links (with horizontal padding) instead - especially if people only skim my writing.

I do make the links underlined in print.css, though.

Just consider testing the readability of your link emphasis, before you obsess too much over how your underlines look. :)

Reply on news.ycombinator.com