Your Website

From 64aa03ef0725f8c2f310793a29e1d6b1a116b627 Mon Sep 17 00:00:00 2001 From: "Matt D. Smith" Date: Thu, 24 Sep 2015 21:17:19 -0400 Subject: [PATCH] updated readme to include vanilla instructions, fixed a typo on the demo index.html file --- README.md | 29 +++++++- bookmarklet/index.html | 13 ++++ bookmarklet/scripts/readable-bookmarklet.js | 80 +++++++++++++++++++++ bookmarklet/scripts/readable-min.js | 1 + config.codekit | 31 ++++++++ index.html | 2 +- 6 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 bookmarklet/index.html create mode 100644 bookmarklet/scripts/readable-bookmarklet.js create mode 100644 bookmarklet/scripts/readable-min.js diff --git a/README.md b/README.md index 7893ecc..5f4db4f 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This gives you a visual reference to tell you if tweaks are needed on your font- Read why the 45-75 rule is important and [view the demo here](http://mds.sh/readable). -## Implementation +## Implementation Using jQuery There are 3 files required to get **Readable** working on your site. 2 of them are inside the **readable** folder and the other is jQuery. @@ -34,3 +34,30 @@ Put **readable.css** before your closing `` and **jQuery** and **readable ``` + +## Implementation Using Vanilla JavaScript +Only 2 files required to get **Readable** working on your site. +They are inside the **readable** folder. + +1. readable.css *(2 kilobytes)* +2. readable-vanilla.js *(1 kilobyte)* + + +Put **readable.css** before your closing `` and **readable-vanilla.js** just before your closing `` + +```html + + + Your Website + + + + + + + + + +``` + +Thanks to [Jon Suh](http://github.com/jonsuh) for the vanilla flavor! diff --git a/bookmarklet/index.html b/bookmarklet/index.html new file mode 100644 index 0000000..88435fd --- /dev/null +++ b/bookmarklet/index.html @@ -0,0 +1,13 @@ + + + Readable - A plugin for creating readable paragraphs + + + + + + + + Readable + + \ No newline at end of file diff --git a/bookmarklet/scripts/readable-bookmarklet.js b/bookmarklet/scripts/readable-bookmarklet.js new file mode 100644 index 0000000..8d557df --- /dev/null +++ b/bookmarklet/scripts/readable-bookmarklet.js @@ -0,0 +1,80 @@ +// +// Readable-bookmarklet.js +// +// Created by Matt D. Smith on 9/17/2015. +// Copyright (c) 2015 Matt D. Smith. All rights reserved. +// + +(function(){ + + function initMyBookmarklet() { + (window.myBookmarklet = function() { + + // start readable + var charCountShowing = false; + + $('span.readable').css({ + "background-color": "#f45b5d", + }); + + function addSpans(){ + $('p').each(function (){ + var $this = $(this); + var ohtml = $(this).html(); + $(this).data('ocontent', ohtml); + $this.html(addReadable); + }); + } + + function addReadable(){ + var text = $(this).text(); + var a = text.substring(0, 45); + var b = text.substring(45, 75); + var c = text.substring(75, text.length); + var d = a + "" + b + "" + c; + return d; + } + + function toggleSpans(){ + if( charCountShowing === true ){ + $('p').html(function(){ + var p = $(this).data('ocontent'); + return p; + }); + charCountShowing = false; + }else{ + addSpans(); + charCountShowing = true; + } + } + + function init(){ + charCountShowing = true; + addSpans(); + } + + init(); + + }); + } + + // the minimum version of jQuery we want + var v = "1.3.2"; + + // check prior inclusion and version + if (window.jQuery === undefined || window.jQuery.fn.jquery < v) { + var done = false; + var script = document.createElement("script"); + script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js"; + script.onload = script.onreadystatechange = function(){ + if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { + done = true; + initMyBookmarklet(); + } + }; + document.getElementsByTagName("head")[0].appendChild(script); + } else { + initMyBookmarklet(); + } + +})(); diff --git a/bookmarklet/scripts/readable-min.js b/bookmarklet/scripts/readable-min.js new file mode 100644 index 0000000..75bc952 --- /dev/null +++ b/bookmarklet/scripts/readable-min.js @@ -0,0 +1 @@ +!function(){function t(){window.myBookmarklet=function(){function t(){$("p").each(function(){var t=$(this),e=$(this).html();$(this).data("ocontent",e),t.html(n)})}function n(){var t=$(this).text(),n=t.substring(0,45),e=t.substring(45,75),a=t.substring(75,t.length),o=n+""+e+""+a;return o}function e(){o===!0?($("p").html(function(){var t=$(this).data("ocontent");return t}),o=!1):(t(),o=!0)}function a(){o=!0,t()}var o=!1;$("span.readable").css({"background-color":"#f45b5d"}),a()}}var n="1.3.2";if(void 0===window.jQuery||window.jQuery.fn.jqueryThe Sweet Spot

But in my quest for automated typographic perfection I wanted a way to visually see what target I was shooting for. Readable creates that target.

How it works

The content of each paragraph tag is converted into a text string right after we duplicated it as a data attribute for safe keeping. The text string is then counted using the .substring() function in jQuery to find the 45–75 sweet spot. We then pop in a span tag with a "readable" class. This gives us what we need to create the styles. Once the toggle is switched off, we reinsert the original html content back into the paragraph using the preserved html from the data attribute. If you want to dig deeper, view it on GitHub.

The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute for safe keeping. The text string is then counted using the .substring() function to find the 45–75 sweet spot. We then pop in a span tag with a "readable" class. This gives us what we need to create the styles. Once the toggle is switched off, we reinsert the original html content back into the paragraph using the preserved html from the data attribute. If you want to dig deeper, view it on GitHub.

How it works

Resources