Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

XML Applications : Page 6

Behaviors are an enhancement to Internet Explorer 5 that allow designers to add scripting elements without having to do the scripting needed to make them work. Behaviors are also a way in which scripters can write a script once and turn it over to designers for use whenever needed.


advertisement

Pullquote Behavior
If you've ever picked up a magazine then the odds are good that you've seen a pullquote. A pullquote is where a bit of text from the body of an article or story is pulled from the text and highlighted in some way to catch your eye. It's hoped that the quote will tease you enough to get you to read the story.

"...it's been a pain to do pullquotes in a Web page."

Up until now

it's been a pain to do pullquotes in a Web page. It always required working them into the HTML code and hand copying the text to be quoted. For those reasons pullquotes have been a bit scarce on the Web.



By using a pullquote behavior it's now possible for anyone to put a pullquote into a Web page without having to do complex layout tricks. It's as simple as putting a tag and some basic CSS into a Web page.

You setup PULLQUOTE via XML so you'll need to create an appropriate namespace before you can use it. We're doing it as XML so that older browsers aren't affected adversely. It also let's us define a brand new tag. The namespace is set up in the <html> tag on your Web page. Here's the one we're using on this page:


<html xmlns:pub>

The next step is to define XML tag we'll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:


<style>
<!--
@media screen {
	pub\:PULLQUOTE {behavior:url(pullquote.htc)}
	.pullstyle {width: 200;
		color:black;
		text-align: left;
		border-color:#9966cc;
		border-width:thin;
		border-style:solid;
		border-right: none;
		border-left: none;
		padding: 1em;
		margin: 6pt;
		font-family: arial;
		font-style: italic;
		font-size: 14pt;
	}
}
-->
</style>

As you can see, PULLQUOTE only needs the behavior property. It must point to the behavior file, footnote.htc. You can download the pullquote.htc file here. Once you have it just make sure it's on your server and that the url is specified properly in your CSS.

We also define a class called pullstyle. This is the CSS description of how a pullquote will look when rendered on a Web page. The behavior will apply this style to the pullquote that it creates. You have complete control over the appearance by changing the properties and values in pullstyle.

All that's left then is to place the XML tags around the text for which you wish to offer a magnified view. Here's how we marked the pullqoute near the top of this page:


<pub:PULLQUOTE align="right" lips="pre">it's always
been a pain to do pullquotes in a Web page.</pub:PULLQUOTE>

The align property specifies whether the pullquote will align on the left or the right of the page. Its valid values are, surprisingly enough, left or right. If you don't specify an alignment then the pullquote will align on the left.

"An ellipsis is a series of three dots..."

The second property is lips. This is our abbreviation for ellipsis.

An ellipsis is a series of three dots that can be used at the beginning of a quote, at the end, or on both ends. You can see an ellipsis in the pullquote to your left. The acceptable values for lips are pre, post, or both. All other values will be ignored. This is an optional property but it is very useful if you are only quoting part of a sentence.

Finally, just a few thoughts on proper use.

A pullquote should contain text that will draw the reader in. It should only contain a small amount of relevant text and not several sentences. You'll probably want to consider using it near the top of a page so that it will be seen immediately by a prospective viewer. You also shouldn't make the style too different from the rest of the page. It should fit in yet be immediately visible.

With those thoughts in mind, as well and your newfound knowledge of how to apply this behavior, it's time for you go to out there and pull one over on someone. A quote, that is.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date