Crafting link underlines on Medium(medium.com)
medium.com
Crafting link underlines on Medium
https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9
6 comments
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.
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
https://medium.com/@cshirky/last-call-c682f6471c70
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.
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
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.
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.
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.
Only tested on OSX.
Tried to make it work on links and couldn't. Care to give it a try?
Here: http://jsfiddle.net/41s1wqhs/18/
Links are blue, and turn red on hover.
Links are blue, and turn red on hover.
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.
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!
[deleted]
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
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
https://github.com/NYTimes/Emphasis
[deleted]
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. :)
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. :)
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.