A few days ago while working on a new UI component I had to come up with a solution to highlight identified keywords (using named entity recognition) inside of a chunk of user generated text. While the idea was fairly simple, the challenge was creating a solution which would work [relatively] well for all modern browsers including IE7, IE8, Firefox, Safari, and Chrome.

View Demo

Background

The easiest solution to highlight keywords inside of a chunk of text would be to swap font colors, maybe even change the "highlighted" background color and type weight for added emphasis. However, the easiest solution is not always the best solution. Relying on font color and weight alone is not enough.

• Images – Photos are full of color, bold, and attractive. Ignore these while toggling the text color of de-emphasized / emphasized content and a visitors eyes will still wander.
• Dynamic – Content may be user generated. Assuming basic HTML like <em>, <strong>, <a>, etc are supported, original styles should remain untouched.

The better solution would be to create a "mask" overlaying the source content while using a spotlight-esque effect to highlight keywords. The overlay method is a safer option which reduces the likelihood of overriding any user generated content [styles].

Example HTML

This demo is a simplified version of the original code – shared as an example for fading the source content and highlighting important keywords within. Originally planned for use where classes are dynamically generated and wrapped around identified keywords, I have manually inserted classes for the purpose of this demo. The basic example HTML is below (text sampled from the Avatar Wikipedia entry):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="wrapper">
	<ul class="entity-results">
		<li><a class="d1" href="#">Summary</a></li>
		<li><a class="d2" href="#">Avatar</a></li>
		<li><a class="d3" href="#">Formats</a></li>
	</ul>
	<div class="content">
		<h2>Avatar (2009 film)</h2>
		<div class="entity-source">
			<img src="images/avatar.jpg" alt="Avatar poster"/>
			<p>Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction epic film written and directed by <a href="http://en.wikipedia.org/wiki/James_Cameron">James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox. The film is co-produced by <a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">Lightstorm Entertainment</a>, and <span class="d1">focuses on an epic conflict on Pandora</span>, an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting <a href="http://en.wikipedia.org/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. On Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora, the Na'vi, engage in a war over the planet's resources and the latter's continued existence. The film's title refers to <span class="d2">an avatar, a representation of a real person in a virtual world</span>.</p>
			<p><span class="d3">The film was released in 2D and 3D formats</span>, along with an IMAX 3D release in selected theaters. The film is being touted as a breakthrough in terms of filmmaking technology, for its development of 3D viewing and stereoscopic filmmaking with cameras that were specially designed for the film's production.</p>
			<p>Read the rest of the <a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">original Wikipedia page about Avatar</a></p>
			<div class="mask"></div>
		</div>
	</div>
</div>

.entity-results is a sample list corresponding to select text inside of the .entity-source wrapper. Each <li><a></li> has a matching keyword phrase wrapped in the same class. Ideally these are dynamically included in the document. The "mask" is included inline as an empty <div> which can also be inserted using JavaScript.

Minimal CSS requirement

Using a few lines of CSS, overlay a mask above the content. The <span> around the keywords to highlight is crucial in order to pull the text out above the mask.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.entity-source, .entity-source span.show {
	position: relative;
}
.entity-source .mask {
	display:none;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:1;
}
.entity-source span {
	z-index:2;
}
.entity-source span.show {
	background:#ffc;
	color:#000;
}

Example jQuery

The example uses jQuery to handle the opacity changes and toggle of active / inactive states for detected keywords.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

jQuery(document).ready(function($) {
    // mask source
    var maskSource = jQuery('.mask');
    jQuery('.entity-results').hover(function() {
        maskSource.animate({opacity:0.7},1).fadeIn('750');
    }, function() {
        maskSource.fadeOut('1000');
    });
 
    // match hover
    var sample1 = jQuery('span.d1');
    var sample2 = jQuery('span.d2');
    var sample3 = jQuery('span.d3');
    jQuery('a.d1').hover(function() {
        sample1.addClass('show');
    }, function() {
        sample1.removeClass('show');
    });
    jQuery('a.d2').hover(function() {
        sample2.addClass('show');
    }, function() {
        sample2.removeClass('show');
    });
    jQuery('a.d3').hover(function() {
        sample3.addClass('show');
    }, function() {
        sample3.removeClass('show');
    });
});

When your mouse cursor hovers over a keyword in the right sidebar, the mask is set to display block with opacity handled by the jQuery .animate() effect. View the demo below or download the source.

View Demo

Without going into detail concerning elements that your site should have, let’s look at one element that all blogs can leverage for increased page views. How do you get readers to explore content beyond their current view? By including a simple block element that introduces content before / after the current post, or articles deep within the archives. What is this simple block element comprised of?

• Previous post – reverse chronological (if one exists)
• Next post – chronological (if one exists)
• Posts sharing the same categories
• Posts with similar tags

If you browse the WordPress codex, or explore the individual files inside the default theme each installation includes, you’ll notice all of the required functions needed to create a simple "explore" – similar to what I have implemented on 5thirtyone.com. It really is just a matter of collection the functions, adding a little semantic markup, and styling to taste. The functions necessary are:

	<?php previous_post_link('%link') ?>

Codex: Used on single post permalink pages, this template tag displays a link to the previous post which exists in chronological order from the current post.

	<?php next_post_link('%link') ?>

Codex: Used on single post permalink pages, this template tag displays a link to the next post which exists in chronological order from the current post.

	<?php the_category(', ') ?>

Codex: Displays a link to the category or categories a post belongs to. This tag must be used within The Loop.

	<?php the_tags( '', ', ', ''); ?>

Codex: First available with WordPress Version 2.3, this template tag displays a link to the tag or tags a post belongs to. If no tags are associated with the current entry, the associated category is displayed instead. This tag should be used within The Loop.

Put it all together

Four simple functions placed together create an invaluable resource for readers to explore your archived content from various slices.

1
2
3
4
5
6
7
8

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<ul class="exploreThese">
		<li>Previous: <?php previous_post_link('%link') ?></li>
		<?php /* if next post exists */ next_post_link('<li>Next: %link</li>'); ?>
		<li>Category: <?php the_category(', ') ?></li>
		<li>Tag: <?php the_tags( '', ', ', ''); ?></li>
	</ul>
	<?php endwhile; else: endif; ?>

The markup above generates an unstyled unordered list which when rendered provides:

• Line 1 & 8: Standard WordPress loop – required if you are re-using this code outside of the standard loop in single.php.
• Line 3: Title (link) of a previous post.
• Line 4: Title (link) of the next post. If there are no newer posts, the entire line is ignored. Thanks Ronald.
• Line 5: Renders assigned categories (comma separated). Links to an archive page for posts sharing the same category.
• Line 6: Renders assigned tags (comma separated). Each tag links to an archive page for posts sharing the same tags.

Drop the block of code somewhere inside single.php so that WordPress knows to generate the proper links. Note that if you do plan on inserting the code outside of the standard loop, lines 1 & 8 are required.

Expand on the explore block

Looking for more options to offer your readers? Check out some of these functions and plugins to add to the explore block: wp_dropdown_categories, wp_get_archives, wp_tag_cloud, Related Posts, or Random Redirect. Hopefully there is enough to expand on the idea of the reader explore block on your own. Feel free to drop any questions in the comments. [Digg this]

Anyone who inserts contextual advertisements into their pages – like Google Adsense – are aware of the fact that some readers block advertisements. Oftentimes, methods for removing advertisements from view alter the structure of a page, in turn, changing the layout. For some websites or blogs, this does not pose a problem. For websites created to present both content and advertisements in harmony, removing ad elements may have a negative impact on a pages layout.

Ultimately, the author controls layout

Contrary to what some readers [would like to] believe, the author ultimately controls how content is displayed on a site. The author also reserves the right to present advertisements [hopefully, in a tasteful manner]. The argument for both sides of the fence is lengthy and one which this post does not address. What we will address is the use of simple HTML/CSS to designate advertisement elements. Areas of a page which do not collapse are disappear from view using rudimentary adblocking tools like Firefox’s Adblock extension.

Prevent the adblock "shift"

When users remove standard advertisement scripts from view, the ad element collapses moving surrounding elements. In order to control the layout of a page from shifting, I wrap the ad script with a div which I then apply a fixed width & height to using CSS. I also add a "title" to the div to let readers with adblocking enabled know what is missing.

The corresponding HTML for a 468×60 text link Google Banner might look like:

<div id="adsense_468">
<p id="adtitle">Advertisement</p>
<center>...INSERT ADSENSE CODE...</center>
</div>

With a few lines of CSS, add a fixed width & height to the #adsense_468. Similar to the advertisement presentation for the Grid Focus, we’ll also add a 1px border and use position: absolute; to move the title to the top right corner.

#adsense_468 { width: 495px; height: 70px; border: 1px solid #BBB; padding-top: 5px; position: relative; }
#adsense_468 #adtitle { font-size: 11px; position: absolute; display: block; background: #FFF; padding:0 3px; top: -8px; right: 12px; }

The question now is, who out there is adblocking? Come clean!

Take Care of your Hosting Issues

Worried that you are paying to much for your hosting? Get the best website hosting available. They can also take care of your domain registration needs, making it easier than ever to host a site without breaking the bank.

This is a list of HTML elements I’ve found to be very poorly represented in most markup on the web today. Many of these elements offer more semantic value than actual functionality, but with the rising popularity of CSS driven design where HTML elements are used for what they were actually intended for, I felt shining a little light on them was appropriate.

[W]here HTML elements are used for what they were actually intended for. Ouch. You got me. I’ve been guilty of using a definition list here or there for *cough* non-definition list elements.

Anyhow, check out the <address> tag which can be styled with a wee bit ‘o CSS.

<address>
5thirtyone.com
<br />
1234 Pine St.
<br />
Seattle, WA
<br />
Phone: (123) 456-7890
</address>

Check out the remaining elements. Don’t be coy, admit anything that is altogether new to you.