Setting the initial letter of a page—or chapter, or section—in larger type and dropping it down a bit into the text is similar to decorated initials common in illuminated manuscripts, such as the breathtaking Saint John’s Bible, and of course, in the world of print. Initial drop caps are fairly simple to accomplish on the web with CSS and the :first-letter pseudo-selector. But, as you might guess, the differences amongst various browsers can make this a frustrating exercise.
Often combined with initial drop caps, another common typesetting flourish is to set the remainder of the first word, first several words, or the entire first line in small caps. Here you use the CSS :first-line pseudo-selector, though it too suffers from a few browser peculiarities.
Pseudo-selector Basics
Pseudo-selectors, or pseudo-elements, give a designer the flexibility to style portions of the document that are not distinct elements within the DOM. The W3 definition is as follows.
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information.
:first-letter controls everything up to the first letter or number of an element, including punctuation, while :first-line, controls everything in the first line of an element. We will be building CSS rules with these selectors to create initial drop caps in a first line of small caps.
The Challenge
The eventual goal for the examples below is to style only the first paragraph of a content page from a CMS (such as WordPress), and assumes that the paragraph follows an h2 element.
The Solution(s)
There are a few approaches to using first-letter and first-line pseudo-selectors. One is to assign an explicit class to the element you wish to style. Another is to use preceding selector notation to target the CSS rule. A third method uses Javascript (jQuery in this article) to make things happen. All three approaches are covered in this article.
Explicit Class Solution
The first option is to assign an explicit class to the target element, and apply the pseudo-selector to that class, as shown in the next several examples. Setting the element class will look something like the following example, where the paragraph is given the class someclass.
<pclass="someclass">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec ullamcorper mauris sit amet
ante. Donec convallis nisl malesuada eros. Nullam volutpat
quam non elit.</p>
(For the examples in this article, all sample output elements also use a class of _examples—shown below—that sets the font size to 16 pixels and the line height to twice that. So the code above would use class="someclass _examples" to combine the two.)
._examples{font-size:16px;line-height:32px;}
Initial Capital
The following CSS rule sets the font size for the first letter of the example1 class to 32px (two em).
.example1:first-letter{font-size:32px;}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mauris sit amet ante. Donec convallis nisl malesuada eros. Nullam volutpat quam non elit.
Small Caps
To set the first line in small caps, we will use the font-variant property, as shown below.
.example2:first-line{font-variant:small-caps;}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mauris sit amet ante. Donec convallis nisl malesuada eros. Nullam volutpat quam non elit.
Put example1 and example2 together and we get the two combined styles, shown below.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mauris sit amet ante. Donec convallis nisl malesuada eros. Nullam volutpat quam non elit.
Dropping The First Letter
That looks nice, but tweaking things will make things look even better. The key is to float the letter to the left and move it down, then adjust to taste.
For this example, there are several adjustments to the first letter rule to produce something like the text below.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ullamcorper mauris sit amet ante. Donec convallis nisl malesuada eros. Nullam volutpat quam non elit.
The first letter adjustments include applying a left float, bumping the font size up to 64px, then tweaking the margins and line height.
Setting the first letter size to 64 pixels is a matter of taste, but essentially makes the first letter approximately the size of two lines. The margin adjustments accomplish a few things. The top margin moves the baseline of the letter up to the bottom of the second line; the right margin adds a bit of space after the large initial letter; the bottom margin chops the invisible space below the letter so the following line will flow under it; and the left margin cheats the big serifs a bit into the left margin to the meat of the letter aligns with the smaller text below it.
And this is where browser discrepancies bite us. In Internet Explorer, the top margin used above do not work to lower the “L” into the text as they do in Firefox. In IE we need to adjust the line height to make it work.
h2 + p Solution
In this approach, we set up h2 + p:first-letter and h2 + p:first-line rules (or h3, etc.). The advantage here is that additional tagging is unnecessary, and nicely separates content from display.
Unfortunately, IE 6 fails to handle the element-preceding notation (+) when combined with a pseudo-element such as :first-line or :first-letter. It does not hurt anything; your styling will simply not be applied in IE 6.
Another potential ill-effect is the need to avoid multiple h2 tags per page, unless we want multiple first-letter / first-line styling.
Also, this can work if we do not care about IE 6 (or can accept the graceful downgrade) and can control the content tagging such that a single element such as h2 is followed by the paragraph in need of special styling.
The jQuery Solution
Here we use jQuery to tear apart then rebuild the target paragraph to explicitly invoke the correct CSS rules.
This solution works in IE 6 (but not IE 5.5 and below).
Include jQuery and the following script:
<script>
$(document).ready(function(){
$("h2 + p:eq(0)").each(function(){var t = $(this).text();var f = t.substring(0,1);var l = t.length;if($.browser.opera)
t ="<div class='operap'>"+ t +"</div>";else t ="<div class='firstp'>"+ t +"</div>";
$(this).hide().replaceWith( t ).show();});});</script>
The code uses jQuery’s selector logic to target h2 + p:eq(0), and simply replaces the paragraph with a div of class firstp. An advantage of this approach is that you do not have to explicitly tag the first paragraph by hand. Also h2 + p:eq(0) is specific enough to target the first paragraph after the first h2 element and it because jQuery is doing the heavy lifting, it works in IE 6. Which brings us to Opera.
More Browser Disagreements
All this works fine in Opera, except the top margin and a little rendering issue.
if($.browser.opera)
t ="<div class='operap'>"+ t +"</div>";else t ="<div class='firstp'>"+ t +"</div>";
$(this).hide().replaceWith( t ).show();
The code above uses a special class with a top margin for :first-letter of 0 if it’s running in Opera, otherwise it uses the normal class that works for IE and Firefox. Then, it hides the target element, sets the HTML, then makes the element visible again. This is because Opera does not correctly re-render the element after the HTML has been changed. This forces the re-render to happen in Opera. (The curious syntax in this last line is an example of chaining jQuery calls.)
Over time, the Samsung Blackjack has become a bit of a burden for me. At first, I really liked it, but it has developed some troubles. It drops calls, gets poor reception, and decides to turn its phone radio off (almost randomly). Speakerphone and other problems compounded my frustration with it. Windows Mobile 5 has some issues as well, and a WM6 update was not available when I had last checked.
Then, out of the blue, AT&T called last week and offered to replace it, as it was in the Jan 2007 batch of phones with antenna problems. Sure enough, a replacement arrived a couple days later.
I updated ActiveSync and sync’d the phone to my PC. While getting the latest ActiveSync I discovered that Windows Mobile 6 was available as an update as well. So, in one weekend two of my biggest gripes about the Blackjack have been rectified. It remains to be seen whether the reception stays solid or not, but if it’s like the original refurbished Blackjack I got (which had to be replaced due to charging problems), the reception should be much better.
Updating Blackjack to WM6
To update the Blackjack to WM6, visit Samsung’s WM6 update site and follow the instructions.
Though I highly recommend you follow the instructions listed there verbatim, essentially the process is as follows.
Turn off anti-virus and firewall software – I needed to turn off ZoneAlarm before sync-ing the phone.
Download and update ActiveSync – You will need version 4.2 or greater.
Download and install the Samsung Modem Drivers – Not sure the reason for this, but probably it’s got to do with the flash process.
Download the Blackjack Software Update – This is the WM6 update for the Blackjack.
Run the WM6 Blackjack update – this should take several minutes. You’ll see a downloading screen on the phone (shown below).
Backup data from your phone – The WM6 update will erase all data on the phone.
Reset the Blackjack with *2767*3855# – This simply reboots the phone.
Verify the phone’s software version with *#1234# – should be something like I607UCHA1.
WM6 is now installed – enjoy.
So, thanks AT&T! (And Samsung.)
It’s nice to see a big company make something right without me having to spend hours on the phone talking to customer no-service. Yes, I know other customers have probably taken care of the complaining for me, but it was nice to have AT&T take care of the replacement so quickly and easily.
WM6 is nice too, so thanks, Samsung.
Update: Though WM6 and the replacement Blackjack are definitely a step up for me, I have noticed an occasional issue where the phone will lock up and require a power-off, power-on cycle. tmantist wrote in to say “I am having issues with WM6. I have trouble making calls now. This is so weird, before I installed WM6 I didn’t have any call connectivity problems.” So heads up. WM6 is not all sunshine and light for everyone.
After trying several converters that either watermarked the results, failed to convert, or simply built incompatible files, I stumbled across a reference to SUPER at VideoHelp.
Right away I was able to convert an FLV (Flash Video) file to MPEG4 H.264 format. It was huge, as the defaults are set to very high quality. Since the input was a low-quality FLV file, dialing the quality back quite a bit (see the two circled settings below) and keep the file size under control. With some additional tweaking I’m sure the video can be shrunk even more.
Anyhow, then I had an MP4 file ready to transfer to my new Zune.
At that point, I had to struggle a bit with the Zune software. Tip: do not manage your files inside the Zune software. Point it to your media directories and delete or rename them, etc. from Windows Explorer.
Also, it helps to send the SUPER output files somewhere Zune isn’t looking, then rename and change the meta-information (like Title and so forth) before moving the video to your media directories.
Earlier this year I upgraded to a refurbished Samsung Blackjack (from a Sony-Erricson W800i). After trading it in for another (refurbished) Blackjack that would take a charge, I was fairly happy with the phone. It had a full QWERTY keyboard, nice screen, and handled text messaging, web browsing, and email pretty well.
Over the last six months it has become a very frustrating phone. Calls are dropped, “no service” situations where there is clearly a cell signal, and apparently random shutdowns of the phone.
The speaker phone feature is great until there is any ambient noise, such as while driving. The Blackjack “helpfully” increases the volume automatically, and unfortunately beyond the meager ability of the built-in speaker. So what should be a hands-free situation becomes a chore of manually compensating for the fluctuating volume, ambient noise, and a weak speaker.
Granted, it is entirely possible that this refurbished Blackjack is suffering from a damaged speaker. But in this case, the changing volume makes a bad problem worse.
Blackjack annoying design
It does not help that there are physical design issues with the Blackjack — for me, at least.
First, the phone feels nothing like a phone; it is wide and flat. Maybe that works for some people, but to me it feels weird.
Second, the number keys are positioned on the QWERTY keyboard so that a column of keys is between each number column. On top of that, if you need to dial a number with letters in it or have to enter letters into an automated answering system, you are out of luck unless you remember which letters correspond to which numbers on a normal phone keypad. The first part of this appears to be fixed with the Blackjack II, but as far as I can tell you will still be guessing which number matches which letter.
Finally, the cable connection design is poor. The covers are flimsy and prone to falling out. The USB cable shares the charging connection, so if you are connected via USB you are limited to a USB trickle charge. Yes this is common with cell phones. Yes I know these companies love their proprietary connectors. It is still, however, very annoying. I have too many special cables and chargers and whatnot already.
Nitpicky problems abound.
Did I say finally? Actually, there are a lot of little problems with this phone. The camera is crappy and annoying to use. Common menu choices are nested too deep for normal use. Accidental button presses are too easy. SpecTec promises aside, there is still no wi-fi option available for the Blackjack. Yes, Blackjack users are still stuck with Windows Mobile 5 Standard. No WM6 upgrade, though it has been available for nearly half a year.
The Blackjack Is Still Pretty Nifty
All that said, I still want to like the Blackjack. For the fifty bucks I paid it is not terrible when it works. The Sony W600i felt more polished and more like a phone, but it had its problems too. None come to mind right now, but I am sure there must have been problems (besides the Vitamin Water I spilled on it).
Blackjack II?
The Blackjack II is available now and seems to correct some of the problems. Better antenna, number keys now in a more sensible layout (but no letter-dialing equivalents), Window Mobile 6, GPS, slightly better camera, improved battery life, stereo Bluetooth, a jog wheel, and other minor tweaks.
On the downside, the camera is only slightly improved and there is still no wi-fi. And it is a bit bigger and heavier.
I am torn. It seems to fix a lot of the problems, but part of me just wants a normal cell phone that acts and feels like a normal cell phone.
Steve Martin taught himself to play the banjo when he was in high school, and often incorporated it into his — now long-abandoned — stand-up comedy act. Though he walked away from stand-up in the early 1980s, he has continued playing the banjo. In 2002 he won the Grammy Award for Best Country Instrumental Performance along with Earl Skruggs and Company.
The Shack, by William P. Young, is one of the best books, the best stories, I’ve ever read.
After reading Shawn Anthony’s glowing endorsement and then a slew of excited reviews at Amazon.com, I decided to simply pick up The Shack locally and read it post haste. To my dismay, local stores from Family Christian to Borders had not heard of it and certainly did not stock it. So I ordered it from Amazon and waited.
By the time The Shack arrived I had tempered my eagerness a bit; no little novel is as good as all that. Also, you know how it is when your expectations have been built up too high. The reality is always less than your grand expectations.
The Reality of The Shack
Oddly enough, The Shack is better than those grand expectations. What’s odder still is that I was disappointed in a few respects, and The Shack is still better than my early, grand expectations.
One book that has always amazed me is The Great Divorce, by C. S. Lewis. It presents things in a way that I had never considered, but find fascinating. The Shack has all the wonder of The Great Divorce and two or three times the joy.
It will be tough to think about God in the same way after reading this book.
The Plot
The Shack is a story of a man who meets God. For me to explain more would run the risk of ruining the joy of reading it for yourself, but it is probably safe to quote the back of the book.
Mackenzie Allen Philips’ youngest daughter, Missy, has been abducted during a family vacation and evidence that she may have been brutally murdered is found in an abandoned shack deep in the Oregon wilderness. Four years later in the midst of his Great Sadness, Mack receives a suspicious note, apparently from God, inviting him back to that shack for a weekend.
Against his better judgment he arrives at the shack on a wintry afternoon and walks back into his darkest nightmare. What he finds there will change Mack’s world forever.
Read The Shack
The Shack is a must-have, must-read book.
The Shack is written in an engaging, creative style that will move you to tears, cause you to laugh out loud, and make you feel renewed (but a little sad) when you finish it.
There are a several points while reading The Shack where my brow furrowed and the book was looking maybe a bit “out-there,” but it redeemed itself handily in all but a couple spots. And again, it is still a phenomenal book, tiny little warts and all.
Native tagging support – in addition to categories, tags are now natively supported by WordPress. Importers for Ultimate Tag Warrior, Jerome’s Keywords, Simple Tags, and Bunny’s Technorati Tag plugins are included.
Update Notifications – if an update for WordPress or a plugin is available, a message is displayed indicating.
Canonical URLs – enforces no-www preference and attempts to redirect incomplete URLs or URLs to posts with changed slugs to the correct location.
Pending Review – now a contributing writer can submit a post for review by an administrator or editor.
More features in WYSIWYG Editing – additional features of TinyMCE have been exposed.
Full Atom 1.0 Support – including the publishing protocol.
Using newer jQuery 1.1.4 – the latest and greatest jQuery is version 1.2.1, but at least they’ve upgraded to a faster core. jQuery is a great Javascript library.
New taxonomy system – post and link categories have been combined with tags.
Ability to disable update notifications – in case you don’t want these notifications.
Pluggable Importers – you should be able to write or use plugins to import from additional sources.
Be sure to install and run the WordPress Upgrade Preflight Check to look for compatibility issues before you upgrade to version 2.3.
Upgrade Preflight Check is a plugin that will attempt to check your other plugins and themes for problems that may cause errors when upgrading to WordPress 2.3. Run this before upgrading and it may save some headaches. It works in version 2.3 too and may be useful to help identify the cause of errors.
Problems Upgrading to WordPress 2.3
They say to turn off plugins before upgrading, but who can be bothered with that? Well, I should have (a) run the preflight check and (b) turned off plugins.
The upgrade went fine for the most part, but I did run encounter two situations that required some attention, recorded here in case someone else trips over them (i.e. was as careless as I).
A couple sites running UltimateTagWarrior crashed with the following error on all pages.
Fatal error: Cannot redeclare is_tag() (previously declared in …/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior.php on line 110
The fix was simply to comment out the is_tag() function in the ultimate-tag-warrior.php file.
/*
function is_tag() {
global $utw;
return (count($utw->GetCurrentTagSet()) > 0);
}
*/
Typically, if you don’t upgrade your database immediately after performing an upgrade, your site is mostly okay until you hit the admin interface and upgrade the database. However, after upgrading to WordPress 2.3, visitors to your site may see the above error until you perform the database upgrade step.
Not a big deal, since you need to upgrade the database anyway, but it might be a good argument for doing the upgrade in an off hour.
A Nice Upgrade
All in all, WordPress 2.3 is a nice upgrade and sets the stage for WordPress 2.4, slated for December, 2007. Tagging is now native, though support is limited. The dashboard feeds are pluggable, the canonical URL handling adds some SEO benefits, update notifications will help you keep on top of things, and the other new features — not to mention the bug fixes — argue for (carefully) upgrading to the new system.
The Bible is a collection of sixty-six books, divided into the Old and New Testaments. Christians believe that both are the Word of God, and Jews believe the same of the Old Testament. It is a narrative of God’s relationship with man. It is filled with wisdom, songs, poetry, history, promises, epic struggles, and, ultimately, the road to salvation from our failures. That’s good stuff. The best stuff.
The Bible Is Really Long
Reading through the Bible can be tough. Worthy, to be sure, but it can be a struggle at times. There are thousands of pages covering a dizzying array of names, laws, history, prophecies, songs, stories, parables, and so on.
I’ve started reading through several times; gotten quite a ways a couple times, not so far other times. The New Testament is easier to read, but refers to the Old Testament enough that you lose a lot of context by beginning with the NT.
A Year-Long Reading Plan
There are plenty of reading plans out there, most focusing on a year, occasionally three years.
The Bible is more easily read offline, but having an online plan is helpful in that there are a wide array of study resources online. So, the plan has 365 days, each listed with a reference to a bit of the Bible. Each Scripture reference is linked to an online site.
Using static links, I found it tough to choose a Bible site to which to link. eBible has a nice modern interface and has easy parallel reading and other study features. BibleGateway is familiar to many, and has a wide array of commentaries and other study resources. The NASB study site provides word study and translation features, along with parallel reading of the Amplified Bible.
So, with jQuery, a very nice Javascript framework, I hooked it up to link to all three, or open all three in tabs. Also it uses cookies to remember which of the four choices you last picked.
Basically, the links at the top choose which site to use, and click-handlers intercept the clicks on Scripture references and re-route to the selected site (or open all three in new tabs).
Anyway, now I’ve got a more flexibly-linked read the Bible in a year plan. It still begins on January 1st, though. Since it’s almost October, a plan that starts in January isn’t as helpful as it should be. Maybe I’ll update that.
WordPress and other CMS platforms all come with built-in systems for readers to leave comments about an article. Though each system is slightly different, it’s typical that a reader can leave their name, an email address, a URL, and their comment. Either immediately or after being moderated (to check for relevance and to filter spam), the comment is posted below the article.
Since URLs are often left, arguments rage about how best to filter spam comments. Should you use a captcha or not? Maybe Javascript tricks are better… Does Askimet work?
Often people leave comments to get a link back to their site rather than contribute something relevant. Should you use rel=”nofollow” on links in comments or should you install a do-follow plugin to encourage commenting (as I did a while back)?
What is the best layout for comments? Should they be threaded? Should you allow avitars (little images for each contributer)?
None of those questions are relevant to the content on your website. What’s worse, comments encourage a build-up of noise tied to content a web publisher spends time and money to create.
A web site’s readers occasionally have something valuable to contribute and can teach the publisher something new. Readers can point out where you’ve gone wrong or help you spot problems with formatting or show you where code you’ve posted doesn’t work.
For the most part, the commenting systems built into CMS and blog software is the vehicle used by readers to say their piece. Removing the ability to comment is cutting off a valuable source of feedback.
Feedback In Other Media
Though typical CMS commenting systems are frustrating and usually contribute more to the noise side of the signal-to-noise ratio, reader feedback is an important facet of online publishing. In fact, it’s an important part of any publishing. Newspapers have letters to the editor. Later editions of a book will often answer readers’ letters to the author or incorporate suggestions they’ve sent.
But readers do not get to tack on their rambling thoughts endlessly to newspaper articles. In later editions of a book the author never just includes every letter they’ve received from readers. The author or newspaper publisher would lose control of their work.
Even in talk radio or call-in TV shows, formats that rely on audience contributions, the calls are heavily screened. If they weren’t it’d be boring or get out of control. As soon as that happens, people turn it off and advertisers would look elsewhere to spend their money.
Everyone’s Doing It
Why, then, must a website automatically tack on reader comments to the published content? Everyone’s doing it? That’s just silly. Just because a million websites do it doesn’t mean it makes sense.
Sure, from the reader’s point of view, it’s cool to drop in a comment on someone else’s content — it’s an almost immediate way to publish their thoughts at someone else’s expense.
Hey, if you publish content on the web and you want readers to have that freedom, knock yourself out.
The Alternative
However, I am going to try a different method. As an experiment for now, but I think it makes more sense than the status quo.
At the bottom of every post, there will be information on how to contact me. Probably a contact form. If you’ve got something relevant to say, I want to read it. If I’ve made a mistake somewhere, I would appreciate the heads-up. If I’ve missed something, by all means, let me know.
When you hit send, the form will email your comment to me. If I think it merits it, you can expect to see an update to the article or a follow-up that reflects what you had to say. If I’ve made a mistake, expect to see a correction. In most cases, I will probably email you back.
(Of course, you have the option of responding to my content on my website by creating your own content on your own website. That’s fair.)
What about attribution for submitted ideas?
Good question. If you submit something that makes sense or that I find interesting, and I incorporate your suggestion into web content, you can probably expect to be credited and get a link back to your website within my content. I say “probably” because of course it’s my website and I will decide to whom I link. If you give me a URL to something nasty, don’t be surprised if you don’t get a link on my website.
Bottom Line
I’m turning off the built-in commenting here and will be adding a contact form through which you can send your comments to me via email. If you send me something I find relevant or interesting, you can expect an update or follow-up that probably credits and maybe links to you.
This is the better way, because now I control all of the content but you still have a voice. The interaction can be more personal, the rewards more valuable, and signal-to-noise ratio goes up.
Granted, I haven’t posted here often and so have only a few genuine comments (much more spam though), so it’s not that risky. If it goes well, I will probably incorporate this approach elsewhere.
Of course, if you have something relevant and interesting to say or if you have found another approach to work well, let me know via the contact form.
