|
|
Posted by Andy Dingley on 02/01/06 22:40
On 1 Feb 2006 10:56:00 -0700, Stan McCann <me@stanmccann.us> wrote:
>What's wrong with <address>?
There are two things wrong with <address>
First of all it's only for the "addres sof the page's author / creator",
which also implies that more than one of them simultaneously is right
out. Of course you might _mean_ the page's contact address, which is
fine, but it's not really appropriate to use this for address
directories etc. (although commonly done, and it doesn't really break
anything).
Secondly <address> gives you no additional formatting over its content,
You still have to deal with these linebreask etc. That's a matter for
the old standbys of <div>, <span> and <br>, with plentiful use of the
class attribute. Take a look at the following example and see if it's
any use for you.
Note also that I've got an "address-uk" class on the address element, as
well as "address" itself. This is that you can drive country-specific
address formats.
You might also look at vCard and similar vocabularies for "address"
information. so as to have some consistency about class names.
<html>
<style type="text/css" >
body {
background-color: #F3E39B;
}
/*
@media print {
*/
@media screen {
.address {
background-color: #fff;
color: #0;
border: thick outset #F3E39B;
margin: 20mm 50mm 5mm 20mm;
padding: 1em 2em;
min-width: 60mm;
max-width: 180mm;
font-style: normal;
font-family: arial, helvetica, sans-serif;
font-size: 12pt;
}
.addressee {
font-size: 120%;
font-family: serif;
margin-bottom: 0.33em;
margin-left: -0.5em;
}
.address .postal-town {
margin: 0.25em 0;
}
.address .postal-code {
margin: 0.5em 0 0;
font-size: 120%;
text-transform: uppercase;
}
.address .postal-code-barcode {
display: none;
}
.address.address-uk .postal-town {
text-transform: uppercase;
}
.address.address-uk .postal-code {
text-transform: uppercase;
font-size: 120%;
}
.address.address-us .postal-state {
display: inline;
text-transform: uppercase;
}
.address.address-us .postal-state:after {
content: ', ';
}
.address.address-us .postal-code {
display: inline;
}
.address.address-us .postal-code-barcode {
display: block;
font-family: 'the magic US postal barcode font',
'code 39', 'OCR A extended', fantasy;
/* Set only the right font here and make sure it's present */
font-size: 6mm;
margin: 10mm 0 0 20mm;
}
}
</style>
<body>
<div class="address address-uk" >
<div class="addressee" >Biffa Bacon</div>
<div class="street-address" >1 Bash Street
<br>Wrong-side-of-the-tracks</div>
<div class="postal-town" >Fulchester</div>
<div class="postal-code" >AB1 23d</div>
<div class="postal-code-barcode" >AB1 23d</div>
</div>
<div class="address address-us" >
<div class="addressee" >Barbie Bimbo</div>
<div class="street-address" >Barbie's Condo
<br>Somewhere unfeasibly pink</div>
<div class="postal-town" >Beverley Hills</div>
<div class="postal-state" >CA</div>
<div class="postal-code" >90210</div>
<div class="postal-code-barcode" >90210</div>
</div>
</html>
--
Cats have nine lives, which is why they rarely post to Usenet.
Navigation:
[Reply to this message]
|