Prevent Widows with PHP and JavaScript
One of the small touches you can add to your website is preventing "widows" in your H1-H6 tags. For those who aren't aware, a widow (in terms of text and headings) means only one word of a title wraps to the next line -- a bit of an ugly sight if you ask me. The way to prevent widows with just text is by adding a between the last two words of the text instead of a regular space character. Here are two snippets for preventing widows in your website: one using JavaScript and another using PHP!
// With JavaScript
var text = text.replace(/\s(?=[^\s]*$)/g, ' ');
// With PHP
$text = preg_replace( '|([^\s])\s+([^\s]+)\s*$|', '$1 $2', $text);
As I mentioned originally, widows are not necessarily a bug, but a small visual quirk that just doesn't look great. Keep these regex usages handy so you can prevent such a smudge!
![Create a Sheen Logo Effect with CSS]()
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![MooTools Typewriter Effect Plugin Upgrade]()
Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here...
![Smooth Scrolling with MooTools Fx.SmoothScroll]()
I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll.
The HTML
The only HTML requirement for Fx.SmoothScroll is that all named...
Great idea to take care of all headings at once!
Only concern I would have would be search engines. Are there repercussions to adding this markup? Would it confuse/deter proper search engine indexing?
I’m sure Google, etc take javascript into account in some way, but I would do this via javascript instead of PHP to lessen the chances of hurting search rankings (if that’s important to you).
I’ve never seen the ?= operator in regular expression. And I don’t find such in my regex cheat sheet. Can you please explain how this particular reg ex is working? Thanks.
The
?=is a look-ahead operator. It allows you to specify an expression that matches what comes next. In the example abovethe expression is stating that the character after the space must be zero-or-more non-whtie-space characters followed by the end of the string. In other words, it makes sure that it only replaces the last space in the heading with a non-breaking space.
PHP not cancer of the Web