Archive for September, 2009
Pseudo Drop Caps
They’ve been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you’re now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven’t used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.
This got me thinking, how do we go about creating this with Cascading Style Sheets? A common approach when going down the CSS route is to attach an class to your first p tag within your post/article.
<p class="drop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
By adding an class you can then add the following styling to your css file
.drop:first-letter {
background: #CCC;
border: 4px double #FFF;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 4em;
font-weight: bold;
margin: 0.1em 0.4em 0em 0em;
padding: 0.5em;
}
This will work in most modern browsers but expect the usual issues with Internet Explorer 6, to get around this you will need to wrap your first letter within the <span> element.
Although this works well it got me thinking, could we ditch the id on the first paragraph? The answer is yes but unfortunately my new suggested method isn’t going to work in every browser, just the really cool ones. So, if you’re down with the progressive enhancement let’s get started.
Much like the above we wrap our text in the paragraph tag
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
Then we add our css again, remember if your article is contained with a div, remember to assign the divs id before the p tags in the example below.
p:first-child:first-letter{
background: #CCC;
border: 4px double #FFF;
color: #ffffff;
float: left;
font-family: "Times New Roman", Times, serif;
font-size: 4em;
font-weight: bold;
margin: 0.1em 0.4em 0em 0em;
padding: 0.5em;
text-transform: uppercase;
}
p:first-child:first-letter:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
With your top css selector, first-letter element, you can add any of the following
- background properties
- clear
- font properties
- letter-spacing
- line-height
- text-decoration
- vertical-align
- word-spacing
By floating the dropcap you are causing the letter to be consistent with the rest of the line, while the base is allowed to extend below. If you removeit, it will cause the base to line up with the rest of the line. However, if you decide to use the float, I recommend using the :after pseudo element to clear the paragraph. If you do not your dropcap may interfere with the following paragraph, if the first paragraph is short.
Give it a go and tell me what you think, do you have a better suggestion? Leave a comment and let me know.
Converting Hobo Web to HTML5
Last week I was handed the task of recreating a Hobo Web blog page using HTML 5 elements. Although Hobo are primarily an SEO company, they have already shown a great interest in HTML 5, having posted two brilliant articles in the last year, long before others had jumped on the bandwagon.
The reason I was allocated the job was because they had liked the job I had done in converting my own personal site from XHTML to HTML 5, how I documented it all and more recently having helped set up and run the HTML 5 Doctor.
My plan of action was simple, I was going to pull down a typical blog post, so I could see how the page was being created and what elements I was going to be dealing with. I would then pull together a wireframe, with the design work being done in the browser and then I would write a large document saying how I went about this process. Let it be noted that the crux of the post was based on the excellent article which had been created from the excellent Mr. Bruce Lawson.
If the truth be known, I actually found recreating the layout for Hobo a lot harder than I have for any of my other HTML 5 projects, I guess this was down to the sheer magnitude and the fact that their general page layout consists of three columns, all of which hold important information. Unlike other sites where you might have just one main section and two secondary content areas with trivial bits of information.
The project still has some work to be done on it, I’m still not that happy with a few of the element decisions that I’ve made and with the footer element changing just last week I’ll probably need to revise bits and pieces. The actual post still needs some work and I need to create the diagrams for the post but for all you lucky readers of this site I’m going to be giving you a sneak peak before it goes live to the masses. If you’re interested in seeing this journey then please visit the following link http://www.hobo-web.co.uk/html5.
Although I’m a keen advocator of HTML 5 and everything that it brings to the table, I have to be honest when I say that I’m not sure if we’re ready to go the full hog and create business sites using these new elements. We need to remember that browsers still do not fully understand the new elements that HTML 5 provides and lets not even start to list all of Internet Explorers lovely faults, but whats new there! However, don’t let this stop you experimenting, as you don’t want to be left behind when the revolution comes.