epub-show-url.scss

// When producing HTML for the web and epub, links present a challenge:
// on the web and on ereaders with built-in browsers (e.g. the Kindle app
// on a smartphone), links can be clickable text. But on e-ink devices,
// these links aren't accessible or can't be followed. Instead,
// we need to display the link URLs so that they can be copied manually.
// This Sass class lets you choose to display the URLs of links
// that you select, by adding a `class='show-url'` to the link.
//
// First, it displays the URL in parentheses after any `show-url` link.
// Then it hides those URLs on any ereader that supports media queries.
// Since older e-ink devices skip over media queries, the links stay visible there.
// Finally, it shows the links again on Amazon devices with exactly the
// dimensions of a Kindle Paperwhite devices.
//
// Note that this last step is limited to Kindle Paperwhites.
// The last media queries would have to be extended or repeated
// for other e-ink devices, based on queries that target them specifically.

.show-url {
    // Show URLs, so that they are viewable on
    // ereaders without built-in browsers
    &::after {
        content: " (" attr(href) ")";
    }
    // but if the ereader is likely to have a browser,
    // don't show the URL because it's ugly and clicking is better.
    // For now, we're assuming that any ereader that supports
    // media queries has a built-in browser. This is not
    // technically true of Kindle Paperwhite, though...
    @media all {
        &::after {
            content: normal;
        }
    }
    // ... in case we've let an e-ink Kindle through there,
    // use this Paperwhite selector from
    // http://epubsecrets.com/media-queries-for-kindle-devices.php
    @media amzn-kf8
    and (device-height: 1024px)
    and (device-width: 758px),
    amzn-kf8
    and (device-height: 758px)
    and (device-width: 1024px){
        &::after {
            content: " (" attr(href) ")";
        }
    }
}