nytimes/emphasis

Dynamic Deep-Linking and Highlighting

Emphasis

Now with 100% less jQuery.

Emphasis provides dynamic paragraph-specific anchor links and the ability to highlight text in a document, all of which is made available in the URL hash so it can be emailed, bookmarked, or shared.

For more information and examples please go to this blog post:

http://open.blogs.nytimes.com/2011/01/11/emphasis-update-and-source/

Configuration

The main configuration element is specifying what paragraph elements are in scope and are not. To this end we specify the elements on or near Line 54:

this.paraSelctors = document.querySelectorAll('#article p');

This covers a lot of common markup in many sites and blog. However this could be configured for your specific site.

Example: If all your P tags reside in DIV tags with the "entry" classname, then this would be sufficient:

this.paraSelctors = document.querySelectorAll(".entry p");

Over at The New York Times, we'd use the following:

this.paraSelctors = document.querySelectorAll('#story-body > p');

Usage

Once up and running, a reader can double tap the SHIFT key to show the Paragraph links. Once in this mode they can toggle links and highlighting on a sentence level

Thanks

Levenshtein calculation in the script is based on some nice code by Andrew Hedges http://andrew.hedges.name/experiments/levenshtein/

To-Do

• Further work on UI for highlighting with focus on simplicity
• Social
• Support for touch-based devices

emphasis's Issues

Updated js file is not working with wp-emphasis wordpress plugin

I am not trying to use the updated to .js with wp-emphasis plugin, I have replaced the js files but It seems doesn't work.

Depreciated Twitter hanlde

Out-dated Twitter handlie in copyright and credits. @ravelrumba has been depreciated in favor of @robflaherty

gh-pages branch

Could you please create a gh-pages branch so the demo can be viewed here at Github? I did it in my fork and it lets people play with the demo right away, which is nice. Instructions on how to do it are here.

Unfortunately I don't think pull requests can create branches, otherwise I'd submit one...

Demo doesn't work for me, am I doing something wrong?

I cloned, tested the demo with several web browsers, it doesn't do anything. What's wrong, is it me?

Enabling emphasis for mobile devices

I am working on integrating emphasis for use with iPhones and iPads. I can not seem to activate emphasis from my iPad.

Do I need to implement another event that will work on mobile devices? Has anyone already done this?

IE doesn't like st.innerHTML

IE doesn't running addCSS() starting at line 67 in emphasis-src.js, and the reason is st.innerHTML. If you try opening any article on NYTimes (and any subsequent websites that have implemented this version of Emphasis) in IE, you will see an "Unknown runtime error."

I've recently added a jQuery fork of Emphasis onto my own site and ran into the same problem. Here's the fix I employed:

addCSS: function() {
/*  Inject the minimum styles rules required */
    var st = document.createElement('style');
    // for xhtml validation goodness
    st.setAttribute('type', 'text/css');

    // placed all the css in a variable
    var stStr = 'p.' + this.classActive + ' span { background-color:#f2f4f5; } p span.' + this.classHighlight + ' { background-color:#fff0b3; } span.' + this.classInfo + ' { position:absolute; margin:-1px 0px 0px -8px; padding:0; font-size:10px; background-color: transparent !important} span.' + this.classInfo + ' a { text-decoration: none; } a.' + this.classActiveAnchor + ' { color: #000; font-size: 11px; }';

    // try it the current way, if it fails (and it will in IE) do it the way that works in IE.
    try {
      st.innerHTML = stStr;
    } catch(e) {
      st.styleSheet.cssText = stStr;
    }

    document.getElementsByTagName("head")[0].appendChild(st);
},

What would be required to remove the Prototype dependency?

Removing the $ and $$ calls, of course. But what else?

Quoted text causes highlighting to become greedy

If you click to select a sentence that contains a quote, and that quote terminates the sentence, the highlighting process doesn't stop until it hits the end of a following "plain" sentence.

This case doesn't exist in the demo document, so we have to construct it.

Steps:

• Take the current first paragraph ("The morning after…") and tack it onto the end of the second ("We are not so unlucky"…), combining them into a new single paragraph.
• Activate Emphasis.
• Select the new first paragraph.
• Select the second sentence, beginning "When I remember…"
• The highlight will blow past the quote ending that sentence, including the next one in the highlight, at which point it stops:

If we happen to have consecutive terminal quotes, the process repeats until a "plain" sentence is reached. Rearranging the demo document again:

Unable to deep link to ordered/unordered lists

The handy paragraph symbol doesn't appear next to ol or ul. It also doesn't seem possible to highlight any text that appears in lists.

Google Chrome

Just a heads-up...

Tested this against FF and Chrome. Works in FF, but double shift, paragraph selection and URL building don't seem to work in Chrome. Also, Chrome takes a built url and highlights the appropriate sentence, but does not seem to scroll/focus to the highlighted area.