
Crafting link underlines on Medium - rtpg
https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9
======
idlewords
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.

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

~~~
idlewords
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](https://medium.com/@cshirky/last-call-c682f6471c70)

------
molf
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](http://i.imgur.com/rXBvmbx.png)

------
kilian
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.

~~~
extra88
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.

------
buro9
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.

~~~
killwhitey
My quick attempt:
[http://jsfiddle.net/41s1wqhs/](http://jsfiddle.net/41s1wqhs/)

Only tested on OSX.

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

~~~
killwhitey
This works for me
[http://jsfiddle.net/41s1wqhs/7/](http://jsfiddle.net/41s1wqhs/7/)

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

~~~
killwhitey
Ah, right.
[http://jsfiddle.net/41s1wqhs/19/](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.

~~~
Fastidious
Excellent, thanks!

------
Renaud
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](http://eekim.com/software/purple/purple.html)

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

[https://github.com/NYTimes/Emphasis](https://github.com/NYTimes/Emphasis)

------
kmfrk
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. :)

