Coloring Hebrew Vowels and Accents in HTML/CSS

May 18, 2013 | Bible Tools, HTML/CSS, JavaScript | 9 Comments

In a recent conversation with a Hebrew professor, we discussed adding color to Hebrew vowels and accents. If you’re unfamiliar, Hebrew is different from most Western languages in two main ways. First, it reads right to left (or rtl in HTML terms) and second vowels are represented as dots and lines that can be above or below the consonants.

Browsers seem to handle the rtl part pretty well, but they don’t do an awesome job with the vowel points. And for teaching purposes, it’s very hard to make the vowels a different color from the consonants. Below are a few attempts to do this using various combinations of HTML and JavaScript.

Standard Hebrew Text vs. Pointed Text

In the table below, you can see what Hebrew text looks like with and without vowels. Unlike English, when you remove the vowels the word still takes up the same amount of space.

Hebrew English
Consonants Only אלהים lhm
With Vowels אֱלֹהִים elohim

Coloring Individual Vowels

The first thing I wanted to try was adding <span> tags around vowels and coloring them differently. In the markup below you’ll see the letters pulled out of order with the English HTML, but it’ll give you an idea of what we’re trying to do.

Markup

א<span class="hebrew-vowel">ֱ</span>ל<span class="hebrew-vowel">ֹ</span>ה<span class="hebrew-vowel">ִ</span><span class="hebrew-accent-minor">֤</span>ים

CSS

.hebrew-vowel {
	color: #ff0000;
}
.hebrew-accent-minor, .hebrew-accent-major {
	color: #00ff00;
}

Demo

Hebrew English Result
Original אֱלֹהִ֤ים elohim Correct in all browsers
Span Colors אֱלֹהִ֤ים elohim Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored

Results

In the example above if you’re using a Webkit based browser on a Mac, you’ll see nice red vowels and green accents. The only problem is that – depending on the font – the vowels are often shifted of place.

However, if you’re using Firefox or Internet Explorer, the vowels and accents stay in the right place, but apparently Firefox and IE can’t color them – they just stay black and ignore the CSS color. Lastly there is the strange case of PC/Chrome which renders the vowels as as standalone entities with an outline for the missing consonants (see screenshots at the end).

Layering Vowels with Absolute Positioning

Since Chrome can’t keep the vowels correctly aligned and Firefox and IE can’t color the vowels, I decided to try to layer the text using absolute positioning. In the example, I’ve tried putting the accents and vowels on a single layer and splitting them into two layers with different colors.

  1. Transparent: The bottom layer is the original text used to correctly size the outer span tag
  2. Green: The second layer has vowels removed and only leaves consonants and accents
  3. Red: The third layer has consonants removed and only leaves consonants and vowels
  4. Black: The top layer has only consonants layered on top of the colored layers below

Markup

<span class="hebrew-layers">
	<span class="hebrew-layers-original">אֱלֹהִים</span>
	<span class="hebrew-layers-accents">אלה֤ים</span>	
	<span class="hebrew-layers-vowels">אֱלֹהִים</span>
	<span class="hebrew-layers-consonants">אלהים</span>
</span>

CSS

.hebrew-layers {
	display: inline-block;
	position: relative;
}
.hebrew-layers .hebrew-layers-original {
	color: transparent;
}
.hebrew-layers .hebrew-layers-vowels {
	position: absolute;
	top: 0;
	right: 0;
	color: #ff0000;
}
.hebrew-layers .hebrew-layers-accents {
	position: absolute;
	top: 0;
	right: 0;
	color: #00ff00;
}
.hebrew-layers .hebrew-layers-consonants {
	position: absolute;
	top: 0;
	right: 0;
	color: #000000;
}

Demo: Layering

Style Demo Result
Original אֱלֹהִ֤ים Correct in all browsers.
Span Colors אֱלֹהִ֤ים Chrome/Safari: colored, but misaligned. Firefox/IE: aligned, but not colored
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים Mostly works. Webkit often misaligns.
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
Mostly works, but messes up accent/vowel pairs

Results

In this case, all browsers (including Firefox and IE) are now able to render different colors for the consonants and vowels. And, for the most part, they all put them in the right place.

There are, however, two problems. First, is that while IE and Firefox render things perfectly almost all the time, Chrome doesn’t always keep the consonants in the same position across layers and that creates what looks like a text-shadow effect. I love using and developing in Chrome, and this is one of the few ares I’ve ever found Chrome/Webkit to be the worst in an area (Chrome 26 vs. IE 10 vs. Firefox 21).

The second problem is a bit more obscure. Even in browsers that render more consistently (IE and Firefox), the layered solution isn’t perfect if you want a different color for accents and vowels. The reason is that the vowel and accent positions change depending on if a consonant has only a vowel, only an accent, or both an accent and a vowel. You can see this on the middle letter where the red dot [hiriq] and green arrow [yetiv] change positions in the two layers example. Since the accents are typically bigger I put them in a layer underneath the vowel point so the vowel would show up more clearly on top. So this effect is a kind of trade-off that may or may not be worth it depending on your teaching or reading goals.

Font Demos

While Chrome is by far the worst at rendering the layers consistently, all browsers have trouble at times with some popular Hebrew fonts. Below I’m including some popular ones (Ezra SIL and SBL Hebrew) with screenshots of how they render. At the end, there is a demo of an entire verse where problems are even more frequent.

Browser Font Matrix

Your Browser Mac/Chrome PC/Chrome Mac/Firefox PC/IE
Default Font
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-default pcchrome-default macfirefox-default ie-default
Ezra SIL
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-ezra pcchrome-ezra macfirefox-ezra ie-ezra
SBL Hebrew
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-sbl pcchrome-sbl macfirefox-sbl ie-sbl
Arial
Original אֱלֹהִ֤ים
Span Colors אֱלֹהִ֤ים
Single Layer אֱלֹהִ֤יםאֱלֹהִ֤יםאלהים
Double Layer אֱלֹהִיםאלה֤יםאֱלֹהִיםאלהים
macchrome-arial pcchrome-arial macfirefox-arial ie-arial

Full Sentence Demo

I have this running in a Bible application:

Bible Web App: Hebrew style

And here is entire Hebrew sentence marked up in all the styles:

Original וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Span Colors וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֙הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְה֑וֹם וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם׃
Double Layered וְהָאָ֗רֶץוְהָאָרֶץוהא֗רץוהארץ הָיְתָ֥ההָיְתָההית֥ההיתה תֹ֙הוּ֙תֹהוּת֙הו֙תהו וָבֹ֔הוּוָבֹהוּוב֔הוובהו וְחֹ֖שֶׁךְוְחֹשֶׁךְוח֖שךוחשך עַלעַלעלעל־פְּנֵ֣יפְּנֵיפנ֣יפני תְה֑וֹםתְהוֹםתה֑וםתהום וְר֣וּחַוְרוּחַור֣וחורוח אֱלֹהִ֔יםאֱלֹהִיםאלה֔יםאלהים מְרַחֶ֖פֶתמְרַחֶפֶתמרח֖פתמרחפת עַלעַלעלעל־פְּנֵ֥יפְּנֵיפנ֥יפני הַמָּֽיִםהַמָּֽיִםהמיםהמים ׃

 

Conclusion

Right now, it seems there isn’t a perfect HTML/CSS way of colorizing the Hebrew pointing system, but the layering solution seems best for making it work across browsers as long as you don’t mind the accents being slightly out of place.

If you have any other ideas, please let me know!

This Site Best Viewed in Google Glass

April 17, 2013 | JavaScript | 2 Comments

Screen Shot 2013-04-17 at 1.35.20 PM

Google Glass is Coming!

You might have noticed that Google Glass is now shipping to early adopters and people who won the #ifihadglass competition.

Google has also released their developer documentation, and this means we’re about to start hearing about a lot of cool, new apps that people are building for Glass.

But sadly most of us won’t be able to test them out.

To remedy this sad state of affairs, I’ve come up with a simple tool to simulate using Glass on a website to start giving people ideas of how they might use it. I also really miss the “Best viewed in Internet Explorer” days of web development, so I’m doing what I can to bring back that culture.

Google Glass jQuery Plugin

Here’s the simple code (running on this post) to help people get started:

jQuery(function($) {

	// add Google's Roboto font
	$('<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" />')
		.appendTo( $('head') );

	// insert helpful message with base64 image
	$('<div style="position: fixed; top: 0; right: 0; background: rgba(0,0,0,0.9); border: solid 1px #eee; color: #fff; font-family: Roboto, Helvetica, sanserif; z-index: 9999;">' +
			'<div style="padding: 10%; font-size:3.0em; line-height: 1.5;">' +				
				'<p>Google Glass not detected.<p>' + 
				'<p>Please upgrade to view the top right corner of this site.</p>' + 
			'</div>' +
			'<img alt="Glass Logo" style="position: absolute; bottom: 10%; right: 10%;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAA3CAYAAABJnAVSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCOUI1NUI1QjA5MjA2ODExODA4M0MyODA3MkUyNTY4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0RTIzRjY0NTlGQjAxMUUyQjc2MkYzQTY2MkIzNTg4OSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0RTIzRjY0NDlGQjAxMUUyQjc2MkYzQTY2MkIzNTg4OSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjlCNTVCNUIwOTIwNjgxMTgwODNDMjgwNzJFMjU2ODAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjlCNTVCNUIwOTIwNjgxMTgwODNDMjgwNzJFMjU2ODAiLz4gPC9yZGY6RGVzY3Jp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" />' + 
		'</div>')
		.appendTo( $('body') )
		.width( $(window).width() / 2 )
		.height( $(window).height() / 2 );
});

How Will You Use It?

I really hope this gets your ideas flowing.

If you use this incredible powerful new script or come up with any additions, please let me know.

Drawing 3D Objects and Buildings on Google Maps

February 11, 2013 | HTML/CSS, JavaScript | 5 Comments

As a web developer for a school, I’ve always enjoyed the challenge of creating a good campus map. The school I work for has a growing online seminary program to train pastors around the world, but helping people get around the main campus in Dallas is a still an integral part of any school.

TL;DR: Final result: DTS “3D” campus map

campus-map-sidebyside

Back Story: The Old Map

Several years ago, I wanted to make an interactive 3D building map, so I learned Papervision 3D a powerful Flash-based 3D engine (papervision map). I really liked it at the time but now that Flash is largely out of the picture, it was time to replace the map. I’ve wanted to port the old map to Three.js a JavaScript based 3D engine, but I found that conversion wasn’t as easy as I thought (three.js experiment).

Flash based map

To Google Maps

Since I also want to give first-class support to mobile devices, I decided to switch gears to Google Maps API since it runs really well on phones and tablets now. The problem was finding a way to display the map in an interesting and clear way.

Attempt #1: Flat polygons

My team and I drew out the floor line  of several buildings using Google’s Polygon tool with editable:true turned on, then we created a little loop to draw them all at once. It looks great, but the problem is that it’s not really clear that we’re showing buildings and other than color, it’s hard to tell what’s a parking lot.

var 
	mapCenter = [32.794488, -96.780372],
	mapOptions = {
		zoom: dts.maps.current.campus.zoom,
		center: new google.maps.LatLng(mapCenter[0], mapCenter[1]),
		mapTypeId: google.maps.MapTypeId.SATELLITE			

	},
	map = new google.maps.Map(document.getElementById("map"), mapOptions),
	buildingCoordinates = [
		[32.7948702128665,-96.78071821155265],
		[32.79478789915277,-96.780713852963],
		[32.794745606448785,-96.7807638091059],
		[32.79465594788115,-96.78065450908855],
		[32.794983444026556,-96.78026383449742],
		[32.79507153522898,-96.78037564908573],
		[32.79502490803293,-96.78043113728472],
		[32.79502635107838,-96.78054211368271]	
	],
	polygonCoords = [];

for (var j=0; j&lt;buildingCoordinates.length; j++) {
	polygonCoords.push(new google.maps.LatLng(
		buildingCoordinates[j][0], 
		buildingCoordinates[j][1]
	));	
}       

var polygon = new google.maps.Polygon({
  paths: polygonCoords,
  strokeColor: '#ee1111',
  strokeOpacity: 0.6,
  strokeWeight: 1,
  fillColor: '#eeeeee',
  fillOpacity: 0.7
});		

polygon.setMap(map);

campus-map-flat

Attempt #2: Roof

The next step was trying draw a floating roof simply by copying the the coordinates and adding a little bit to the latitude to make it seem like it was “up in the air.” The result doesn’t really make sense, but it starts to give some building like feeling:

campus-map-roofs

Attempt #3: Drawing a single “Wall”

My next thought was to remove the floor and then draw to draw a single wall on the South side to make it look like a wrap around wall. To do this, I looked through the coordinates and found the western and eastern edge and then tried to draw along it. It worked in many places, but in complex buildings it looked a little strange since there is only one “south” wall.

campus-map-single-wall

Attempt #4: Drawing individual Walls

To fix the problem of complex buildings, I decided to draw a polygon for each wall. This involves taking each floor coordinate and making a pair with the next one and then stretching it upward. Here’s what my new function looks like

function drawExcrudedShape(map, coordinates, height, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity) {

	var pairs = [],
		polygons = [];

	// build line pairs for each wall
	for (var i=0; i<coordinates.length; i++) {

		var point = coordinates[i],
			otherIndex = (i == coordinates.length-1) ? 0 : i+1,
			otherPoint = coordinates[otherIndex];

		pairs.push([point, otherPoint]);
	}

	// draw excrusions
	for (var i=0; i<pairs.length; i++) {

		var first = pairs[i][0],
			second = pairs[i][1],
			wallCoordinates =  [
				new google.maps.LatLng(first[0],first[1]),
				new google.maps.LatLng(first[0]+height,first[1]),
				new google.maps.LatLng(second[0]+height,second[1]),
				new google.maps.LatLng(second[0],second[1])									
			],
			polygon = new google.maps.Polygon({
				paths: wallCoordinates,
				strokeColor: strokeColor,
				strokeOpacity: strokeOpacity, 
				strokeWeight: strokeWeight,
				fillColor: fillColor,
				fillOpacity: fillOpacity
				zIndex: zIndexBase+i
			});

		polygon.setMap(map);

		polygons.push(polygon);
	}		

	return polygons;
}

Here is the result:

campus-map-multi-wall

This looks much better, but now we have two problems. First, some walls incorrectly overlap since I haven’t explicitly told Google the correct order to draw them in z-index problem. Second, if you were to rotate the map 180 degrees (see below), the buildings would be upside-down. This is because I’m not checking which wall is the southern most or the direction of the map.

campus-map-upsidedown

Attempt #5: Re-Ordering the Walls

So in my final attempt, I’ve taken the pairs above and ordered them based on the Google’s heading (map.getHeading()). This allows me to figure out which way is “up” and correctly layer the walls so that they look like real 3D objects. Here’s the final function and map result:

function drawExcrudedShape(map, coordinates, height, zIndexBase, heading, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity) {

	
	var pairs = [],
		polygons = [];
		
	// build line pairs
	for (var i=0; i<coordinates.length; i++) {
	
		var point = coordinates[i],
			otherIndex = (i == coordinates.length-1) ? 0 : i+1,
			otherPoint = coordinates[otherIndex];
	
		pairs.push([point, otherPoint]);
	}
	
	// sort the pairs based on which one has the "lowest" point based on the heading
	pairs.sort(function(a, b) {
		var aLowest = 0,
			bLowest = 0;
			
		switch (heading) {
			case 0:
				aLowest = Math.min(a[0][0], a[1][0]);
				bLowest = Math.min(b[0][0], b[1][0]);	
				
				
				if (aLowest < bLowest) {
					return 1;
				} else if (aLowest > bLowest) {
					return -1;
				} else {
					return 0;
				}						
			case 90:
				aLowest = Math.min(a[0][1], a[1][1]);
				bLowest = Math.min(b[0][1], b[1][1]);	
				
				if (aLowest < bLowest) {
					return 1;
				} else if (aLowest > bLowest) {
					return -1;
				} else {
					return 0;
				}						
	
			case 180:
				aLowest = Math.max(a[0][0], a[1][0]);
				bLowest = Math.max(b[0][0], b[1][0]);	
				
				
				if (aLowest > bLowest) {
					return 1;
				} else if (aLowest < bLowest) {
					return -1;
				} else {
					return 0;
				}	
			
			case 270:
				aLowest = Math.max(a[0][1], a[1][1]);
				bLowest = Math.max(b[0][1], b[1][1]);	
				
				if (aLowest > bLowest) {
					return 1;
				} else if (aLowest < bLowest) {
					return -1;
				} else {
					return 0;
				}	
		
		} 
	});
			
	// draw excrusions
	for (var i=0; i<pairs.length; i++) {
		
		var first = pairs[i][0],
			second = pairs[i][1],
			wallCoordinates = null;
			
		switch (heading) {
			case 0:
				wallCoordinates = [
					new google.maps.LatLng(first[0],first[1]),
					new google.maps.LatLng(first[0]+height,first[1]),
					new google.maps.LatLng(second[0]+height,second[1]),
					new google.maps.LatLng(second[0],second[1])									
				];
				break;
				
			case 90:
				wallCoordinates = [
					new google.maps.LatLng(first[0],first[1]),
					new google.maps.LatLng(first[0],first[1]+height),
					new google.maps.LatLng(second[0],second[1]+height),
					new google.maps.LatLng(second[0],second[1])									
				];
				break;
				
			case 180:
				wallCoordinates = [
					new google.maps.LatLng(first[0],first[1]),
					new google.maps.LatLng(first[0]-height,first[1]),
					new google.maps.LatLng(second[0]-height,second[1]),
					new google.maps.LatLng(second[0],second[1])									
				];
				break;
				
			case 270:
				wallCoordinates = [
					new google.maps.LatLng(first[0],first[1]),
					new google.maps.LatLng(first[0],first[1]-height),
					new google.maps.LatLng(second[0],second[1]-height),
					new google.maps.LatLng(second[0],second[1])									
				];
				break;
		}				
			
		var polygon = new google.maps.Polygon({
			paths: wallCoordinates,
			strokeColor: strokeColor,
			strokeOpacity: strokeOpacity, 
			strokeWeight: strokeWeight,
			fillColor: fillColor,
			fillOpacity: fillOpacity, 
			zIndex: zIndexBase+i
		});
		
		polygon.setMap(map);
		
		polygons.push(polygon);
	}		
	
	return polygons;
}

Final Map

Here is the final result. We’ve changed the parking lots to just have a colored border to help people know where to park and the full map has some interactivity on the buildings, lots, and departments. Go give it a try!

campus-map-final

Thanks to Google Maps Mania for the kind words here and here.

How to Create a Responsive, Retina-ready Website

September 12, 2012 | HTML/CSS, JavaScript | 11 Comments

My team and I at Dallas Theological Seminary just finished putting together a new site that has both a responsive layout and Retina graphics, and I thought it would be worth documenting the decisions we made along the way and some of the tools we used.

We are a pretty small team (we hired the awesome Chris Merritt to do the design and our 1.5 person team [including the awesome Michael Jordan] at DTS did the coding) and had a very tight window (2.5 months) and fairly large site (700+ pages and 2000+ videos and blog posts), so that led us to make some strategic decisions (i.e. compromises) to get it done.

Responsive Layout Plan

In the past we had a separate mobile site (mobile.dts.edu) and I wanted to move to a single site with a responsive layout. We surveyed a lot of responsive sites and found quite a few approaches and ways we could go with it.

Some Great Options

Some have several very different layouts for each of the following: (1) desktop, (2) portrait tablet, and (3) mobile phones. A good example of this is www.BarackObama.com which rearranges its content for each size. Obama’s site is an amazing achievement, but from my perspective there are two main issues. First, it requires an incredible amount of work and time which we didn’t. Second, I personally find that some sites are so different in each layout that its hard to remember or guess where anything will be. For example, in Obama’s case, the big three buttons under the header such as “Get the Facts” are missing in the tablet layout and the “Donate” button gets moved to a more prominent spot.

barackobama.com

Other sites use a fluid grid to handle both desktop and tablet and then when the screen is small enough (like a phone), the layout collapses. A good example of this is www.marshill.com. I like this simpler and more straightforward approach, but a fluid grid layout wouldn’t really fit with what we wanted to do design wise on many of our subpages.

marshill.com

Our Modified Approach

About 5% of our users are on tablets and 5% on mobile phones, and it seems that tablet users seem pretty adept at pinching and zooming. This lead us to a pretty simple approach: (1) a desktop/tablet site, (2) a mobile phone site where our grid collapses (see above).

While changing responsive layouts for mobile devices gets a lot of attention, we also wanted to take into account different desktop sizes. This lead us to create a kind of “bleed” that allows the site to look good on older 1024×768 monitors, traditional 1440×900 laptops, and much larger screens. For our  90% desktop users, we now have a site that is “responsive” to their screen sizes without actually modifying the structural layout and placement of content.

Layout Sizes

Layout sizes Online Ed

Retina (pixel-density: 2.0) Graphics

Right now there are only three main devices that have “Retina” graphics (iPhone4+, MacBook Retina, and iPad 3), but I’m betting that the clones will be arriving very soon and over the life of this site Retina graphics will become an important distinctive, so I wanted to plan ahead to make things look good now and in the future.

Logos and arrows as SVG

Anywhere we have a graphic that’s not a picture (logo, arrow, symbol, etc.) I used SVG (with a fallback PNG). If you go to our site, you’ll see SVGs in our logo, the search icon, and even the social media icons in the footer (roll over the Apple logo for a fun surprise). On a normal computer, the SVG and PNG don’t really look much different, but the difference on an iPhone or MacBook Retina is quite noticeable.

Images vs SVG on Retina

To create the SVGs, I’ve been using Fireworks and Illustrator together. Illustrator can natively work with SVGs, but I couldn’t find a good way to work in pixels to produce the fallback PNGs I wanted for IE8. Fireworks is much better in my opinion for this kind of thing, but it doesn’t have native SVG support (seriously, Adobe?). Here’s the workflow I came up with:

  1. Use Fireworks to create an icon and save as a Fireworks PNG which retains all vector data (myicon.fw.png). Note: Sometimes I made simple vectors like arrows myself, but I also used some EPS and AI files or the SVGs on www.thenounproject.com and elsewhere. The trick is that you have to open many of these in Illustrator, select the vectors you want, then copy them into Fireworks. Yuck, but it works.
  2. Save a flattened PNG for older browsers that don’t support SVG (myicon.png). Make sure you keep this separate from the original Fireworks file (myicon.fw.png) so you can work with the vector data later.
  3. Fireworks can’t natively save in SVG, so I used this amazing “Export SVG” script which does everything you need to create (myicon.svg). So far, I haven’t run into any problems with my images.
  4. I used the SVG/PNG combo as background images and relied on a class on the <html> tag to tell me which one I needed. I initially was going to use SVG detection in Moderizr, but I went ahead with the HTML5 Boilerplate’s approach of using IE’s conditional comments since I didn’t want to wait until JavaScript fired and possibly download twice. So I ended up with CSS like this:
/* SVG for modern browsers */
.logo { 
   background-image:url('myicon.svg'); 
}
/* applied with IE conditional tags */
.lt-ie9 .logo { 
   background-image:url('myicon.png'); 
}

Pictures with HTML5-ish Markup and JavaScript

The W3C hasn’t quite come to a consensus on a new <picture> element and how the <source> elements should work, so right now you have to roll your own or choose a library. Here was my criteria: (1) Support everyone with a client side approach (no server-side logic), (2) Don’t force Retina users to download images twice (like Apple.com does!), (3) Distinguish between Retina devices with large screens (MacBooks and iPad 3) from those with small screens (iPhones 4).

I decided to go with PictureFill.js by Scott Jehl and use the version that employs <div>s with data-* attributes and a <noscript> tag. On the the backend I created a simple function (in my case it’s in C#) that renders the markup (like <% WriteDoubleImage(“image.jpg”,”image@2x.jpg”) %>), so that I can switch to something like Wilto’s fork that uses <picture> elements or another tool later on when/if browsers start using it. I’m currently only using it for in-page images (not backgrounds) on some key areas of the site, but I hope to add more soon.

<!-- Scott Jehl's markup -->
<div data-picture data-alt="Alt text">
    <div data-src="image.jpg"></div>
    <div data-src="image@2x.jpg" data-media="(-webkit-min-device-pixel-ratio: 2.0)"></div>
    <noscript><img src="small.jpg" alt="Alt text"></noscript>
</div>
<!-- proposed W3C markup -->
<picture alt="Alt text">
    <source src="image.jpg 1x, image@2x.jpg 2x" />
    <img src="image.jpg" alt="Alt text">
</div>

On our homepage, the video thumbnails have a Retina (double-pixel) image for Retina devices and a normal image for everyone else. But the hero rotator only sends Retina graphics to large displays (iPads 3 and MacBook Retina) and sends normal graphics to non-Retina machines and Retina iPhones. On the desktop the hero graphic is 500px wide (1000px on a Retina desktop), but on mobile it’s only 120px (240px Retina), so the mobile Retina only needs the original 500px image to look good. Here’s one of the video thumbnails:

Retina image vs. non-Retina

For the Rotator, we also split the image into a JPG and PNG, so that the PNG is just the little sliver that pops above the rotator into the area above (see the top of Andy Crouch‘s head in the first image of this post). If I had made it one PNG it might be 300KB, but the JPG is only 40KB plus a 10K PNG, so this split approach vastly reduces the filesize. Finally, we made the move to Amazon S3 to better handle all the large Retina files.

Here’s the entire site on a Retina screen (click for 4MB file)

www.dts.edu retina

Room for Improvement, Abandoning Media Queries?

There are still some areas of the site we’d like to go back and add double-pixel images or SVG, and there are a few places where the mobile layout could be tightened up a bit. But the biggest consideration I have going forward is possibly abandoning media queries so that phone users can see the desktop site if they want to.

Here’s how responsive CSS works today (using a desktop first approach):

#container {
    width: 1024px;
}
@media only screen and (max-width: 480px) {
    #container {
        width: auto;
    }
}

But if users hit your site with a phone looking for something that they remember seeing when on a desktop, they have no way of making their phone display the desktop version. One way to solve this is to selectively insert different stylesheets like using something like Nathan Smith’s adapt.js. This way you could turn it off and allow a phone to see a desktop site. Alternatively, you could add a CSS class to root <html> that the user could toggle according to preference. The CSS would look like (SASS/LESS would make this much easier)

/* default size */
#container {
    width: 1024px;
}
/* class applied to <html> tag */
.lt-480 #container {
    width: auto;
}

I’m not sure which approach we’ll go with or if we really need to make the change, but for now we have a pretty solid basis to work from as new devices come on the market. The final consideration I’d like to make is using a Facebook/BarackObama.com like side menu for mobile instead of a drop list.

If you have any other tips you’ve learned while creating Retina or Responsive sites, please share them!

And go check out http://www.dts.edu/ !

HTML5 Audio Karaoke – a JavaScript audio text aligner

June 1, 2012 | Bible Tools, HTML/CSS, JavaScript | 9 Comments

What it Does

Based on some amazing work by my friend Weston Ruter, I’ve put together a little library that mashes together

  1. some text (usually some HTML)
  2. an audio source reading that text (usually an mp3)
  3. a timing file (in this case, generated by CMU Sphinx)

The result is that when you press “play” the words are highlighted as they are read, and you can click on words to navigate through the audio. The magic comes from data produced by the CMU Sphinx library (based on Weston’s work) which creates the word timing information.

I put together two demo versions, one of Martin Luther King, Jr.’s I Have A Dream speech and another one of the English Bible using the English Standard Version which has as great API. Unfortunately, the MLK speech didn’t align very well so the demo isn’t very good other than as an example of how dependent the process is on a good alignment.

(note: right now it’s Chrome/Safari/IE9 only since it requires MP3 playback)

How it Works

Although I wanted to use a “standard” format like WebVTT, I also wanted the filesize to be compact since my intended project involved large datasets of 48 hours or more of audio (i.e. the Bible). So here’s the basic JSON format:

{"words":[
 ["in",0.03,0.18],
 ["the",0.18,0.28],
 ["beginning",0.28,0.88],
 ["god",0.88,1.35],
 ["created",1.35,1.93]
]}

Basically, it’s just an array of words with a start and end time. The array of arrays format is quite a bit smaller than using JSON and doesn’t require any processing like WebVTT (although that might change later). It would take quite a bit of time to produce something like this by hand, but Weston used the CMU Sphinx library to generate this data, and it’s probably been about 90% accurate for the entire ESV Bible.

Once all the data is loaded, the AudioAligner class searches through a DOM node for the words in the array, skipping over classes or tags you define, and then links those words to the audio player.

Demo

Again, the demo I put together utilizes the API provided by the creators of the English Standard Version (ESV) of the Bible. The API allows developers to request the text and the MP3 and then this is mashed up with the timing files generated with SMU Sphinx.

HTML5 Karoke Demo

If anyone’s interested in the library, please let me know in the comments and I’ll post it to Github.

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.