Suggestion: Remove the dependence on Basehold.it

[7studio]

The intention

Typecsset uses this quick/painless/JavaScript-free service to get a baseline grid overlay from the simplest way. This choice might please everybody but users have different contraints:

• their env. is not always connected
• for accessibility reasons, you might want to make your text larger (with the help of Text Zoom)

The proposal

Prefer a plain CSS method using the CSS Backgrounds module level 3.

/**
 * 1. Draw (from the bottom to up) a linear gradient of colours which represents
 *    a line with a defined thickness.
 * 2. Define the line box height as the height of the background image.
 */

background-image: linear-gradient(to top, rgba(0, 0, 0, .21) .1em, transparent .1em) !important; /* [1] */
background-size: auto $typecsset-magic-ratio * 1em !important; /* [2] */

Pros:

• Drop out all external dependencies
• No regression compared to the first idea
• Would be possible to draw a correct baseline grid overlay even if the user has set a font size higher than 16px on the root element (or if he zoomed with Text Zoom)

Cons:

• Need necessarily a modern browser
• Would not be possible to have a dashed render

Here is an exemple which superimposes the two methods: http://jsfiddle.net/7studio/RKh7z/

[pkill37]

Nice. :+1:

[kikito]

I sent a PR that left basehold.it as a fallback (for old browsers and phones, for example).