After reading up on dl and the rubyelements on the super awesome html5Doctor, I was inspired to add this markup to my own dev glossary. Being the anal-retentive loser that I am, I frequently visit dictionary.com for correct spellings, and knew they had a viable use for the rubyelement already in their markup. So I simply just put them together, nothing new or out of the box here. Below is a screenshot of the dictionary.com reference mentioned:
<dl>
<dt><ruby><dfn>Franscrollow</dfn> <rp>(</rp><rt>fran-scrahl-oh</rt><rp>)</rp></ruby></dt>
<dd>Verb that eliminates headaches and complexity by combining all relevant stalker-related buzzwords into one easy-to-remember term. Friend + Fan + Subscribe + Follow = Franscrollow. So please, franscrollow me. You'll never be be made obsolete by smelly geeks again. It's the future, and you're welcome.
<cite><a href="http://www.baratunde.com/franscrollow" title="Fanscrollow - baratunde.com"><b>Franscrollow</b> found here</a>.</cite></dd>
<dt><dfn><abbr title="XML Binding Language">xbl</abbr> (<abbr title="Extensible Markup Language">xml</abbr> Binding Language)</dfn></dt>
<dd>is a language for describing bindings that can be attached to <b>elements</b> in other documents. The <b>element</b> that the <b>binding</b> is attached to is called the <strong><em>bound element</em></strong>, acquires the new behavior specified by the <b>binding</b>. <b>Bindings</b> can contain <b>event handlers</b> that are registered on the <strong><em>bound element</em></strong>, an implementation of new <b>methods</b> and <b>properties</b> that become accessible from the <strong><em>bound element</em></strong>, and anonymous content that is inserted underneath the <strong><em>bound element</em></strong>. Most <abbr title="XML User Interface Language">xul</abbr> widgets are at least partially implemented using <strong><abbr>xbl</abbr></strong>. Developers can build their own widgets from existing <abbr>xul</abbr>, <abbr>html</abbr>, <abbr title="Scaleable Vector Graphics">svg</abbr>, and other primitives using <strong><abbr>xbl</abbr></strong>.
<cite><a href="https://developer.mozilla.org/en/XBL" title="XBL - MDN Docs"><abbr>xbl</abbr> found here</a></cite></dd>
</dl>
Regardless of how you feel about the b and ielements, not only are they included in the html5 specification, they have been giving new semantic meaning. These new definitions assure that i != em and b != strongsemantically, but when it comes to browser rendering the pairs are still equals. Considering they have separate meanings, it seems intuitive that their display should also convey the differences, or at the very least that they are different.
For demonstration purposes, I grabbed Panefresco from the super fabulous Font Squirrel, namely because it has 16 styles from which to choose from. For brevity, I’m not going to post Panefresco’s @font-face Kit or my alterations entirely, but you can view the original here and my alterations here. The following font linking css displays the technique, notice how they all have the same font-name but each has its own resources as well as its own unique font declaration(s).
Note: Panefresco applies font-weight values on 250, 750 and 999, which differ from css specifications that use font-weight values divisible by 100. I’ve spoken about the differences between type design conventions and css conventions before, and this is a perfect example. I’m not taking a side here, just pointing out the obvious. For this example I’ve simply set Panefresco 250 to font-weight:200, Panefresco 750 to font-weight:700 and Panefresco 999 to font-weight:900, but that’s not to say they are correct.
I now have more than enough options to convey semantic meaning to users, while staying within the same font-family, it’s just a matter of styling them. Applying a lighter font-weight value to b than to strong is an obvious solution that I’m actually going to carry over to i and em as well. Personally, I view em implying text with stress emphasis as being both italic and bolded, however I’m usually wrong and moreover, this post is about styling i and b.
After putting the demonstration together, I noticed that even though b and strong have different font-weights, they are not very distinguishable and to compensate I actually set b to boldfont-weight:700 and strong above bold to font-weight:900.
Font Linking Separate Styles for <b> and <i> Screenshot - Excerpt from The Last of the Mohicans
So there’s my easy solution to expressing varying degrees of semantics to readers via font linking. Hopefully this will inspire you to embrace a more vivid font design library into your workflows. During the creation of this post, quite a few new ideas popped into mind, hopefully it does the same for you.
Here’s a template that I use practically every time I need to implement Google Maps: it’s Unobtrusive, adds seo and Microformats to your content and provides a non-JavaScript fallback for Accessibility. Below is the markup and some explanations, you can view the Template here.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link rel="profile" href="http://microformats.org/profile/hcard" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<style>
html,body,div,span,img,abbr{margin:0; padding:0; border:none}
.vcard{margin:1em auto; width:500px; height:500px; overflow:hidden; text-align:center; position:relative}
.gmaps-body-content{margin:0.5em}
.geo{display:none}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(36.91212221138637, -76.10680103302002);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var contentString = '<div class="gmapscontent">'+
'<h1 class="first-mapped-h">Chesapeake/Chick's Beach</h1>'+
'<div class="gmaps-body-content">'+
'<p><b>Chesapeake Beach</b>, also known as <b>Chics Beach</b> (and <b>Chick's Beach</b> by non-locals),' +
'is a stretch of beaches running about two miles from the Lynnhaven Inlet to just west of the Chesapeake Bay Bridge Tunnel' +
'in Virginia Beach, Virginia, USA. What originated as a lookout post during war, the beaches eventually turned to more ' +
'recreational activities. The area developed in the early 1900s as a beachfront residential community. Chics was a place ' +
'where you could pick up limeade and an ice cream. Eventually, this site became what is now Alexanders on the Bay. The terms ' +
'Chics and Chicks Beach have stuck. It is a diverse area consisting of beach cottages, condominiums, townhouses, duplexes, ' +
'apartments, and single-family homes. The neighborhoods of Baylake Pines and Baylake Beach hug the east side of the community, ' +
'although the popularity of the Chicks Beach area has those in Ocean Park claiming a piece of it as well. The beach community is ' +
'bordered on the south by Shore Drive. Shore Drive is one of the corridors leading to the tourist destination of the Virginia ' +
'Beach oceanfront and is currently undergoing many improvements to the biking and jogging trails. Little Creek Naval Amphibious Base ' +
'caps the west side of this community, merging longer stretches of undeveloped, protected beaches which harbor dolphin and other marine life.' +
'Also famous in this little stretch was the "Pleasure House"...where the partiers of olden days gathered for gossiping, gambling and whatever. ' +
'This is also where the longest bay-bridge connects to the Eastern shore, across the Chesapeake Bay. (The Chesapeake Bay-Bridge Tunnel)' +
'The residents of this community enjoy less public traffic due to restricted parking and a relatively unknown-about neighborhood. ' +
'The favorite activities of these neighborhoods include boating the four lakes winding through the area, jet skiing, kayaking, walking the ' +
'beach and sailing on the Bay, and the kids engage hours of skateboarding, skimboarding and creating sand-castles.</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Chesapeake Beach (Chicks Beach)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
initialize();
})
</script>
</head>
<body>
<div class="vcard">
<div id="map-canvas" style="width:500px; height:500px;"></div>
<img class="photo" src="http://dev.bowdenweb.com/maps/i/google-static-map-chesapeake-beach-virginia-beach-va.png" alt="Chesapeake Beach, Virginia Beach, VA" title="Chesapeake Beach along the North Shore of Virginia Beach, VA" width="500" height="500" />
<span class="geo"><abbr class="latitude" title="36.91212221138637">N 36° 91.212221138637</abbr><abbr class="longitude" title="-76.10680103302002">E -76° 10.680103302002</abbr></span>
</div>
</body>
</html>
The link rel="profile" href="http://microformats.org/profile/hcard" references the hcard Microformat and is required (in some version) when using Microformats.
The styles defined in the headelement are primarily for the example; it’s up to the developer to decide how or if resets are being used, aside from extra styles, and it’s quite probable that they will change often, from project to project. You should notice that .vcard‘s width and height are the same as #map-canvas‘s inline styles. Matching height and width, along with overflow:hidden on the .vcard ensure that the map is equal to the size you require and that none of our added markup is even noticeable to humanoids.
The map is unobtrusive, which is crucial to keeping our behaviors separated and personally to keeping my sanity. This is extremely easy to accomplish, just tack this JavaScript into your Google Maps script:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
initialize();
})
Moving along to our markup, you can see that all of our content is wrapped in the div class="vcard", which is handy in a few ways. Generally, you’re going to have a wrapper around your Google Map, unless it is the only thing on your page. I’ve found that a lot of the time, especially in float-based layouts, I am constantly setting position:relative on the map’s wrapper because the map div is absolutely positioned.
After our map, you can see two imgelements, the first of which is commented out. Let’s touch on functionality here first: Google Maps is 3rd party and ajax dependant, two separate reasons to be on the defensive with your markup. 3rd party, because you cannot always rely on what is out of your control; yes, even Google goes down, albeit not often, but they still do. ajax because you should still be worried about what happens if the user does not have JavaScript enabled. The image comes into play here: if 3rd Party and/or JavaScript is turned off, instead of showing your users nothing, they will see an image of the exact same map that you were going to show them anyways. Obviously there is no functionality here, but we shouldn’t be worried about that; this is a fail safe, not a guaranteed interactive map.
Google Maps offers Static Maps, which create maps based on url Parameters sent through standard http request and returns the map in the form of an image. As in our example:
All I’ve done is take maps parameters and added them to the Static Maps url http://maps.google.com/maps/api/staticmap?. As you can see, the latitude, longitude, zoom level, height and width are identical, just add the ampersands in between them and equal sign after each (except for latitude/longitude and the last one). You can view the image below:
These Static Maps are quite handy, however we are still relying on 3rd Party; to get around this, simply save the image, renaming it by its location name. You can see where I’ve done this in the markup, with one difference, adding a class of photo to it, so it conforms to hCard‘s parameters.
Lastly, we add our latitude and longitude to the content using the Microformat class geo. Since the vcard‘s area is equal to the content we want shown, this will never be visible to humans, but will always be visible to machines. Bonus!
