hcard-examples-rfc2426
hCard examples
Example hCards.
Authors
- Tantek Çelik
- Brian Suda
RFC 2426 examples in hCard
- In the process of creating 1:1 hCard examples for each example in RFC 2426.
2.4.2 VCARD
AGENT:BEGIN:VCARD\nFN:Joe Friday\nTEL:+1-919-555-7878\n TITLE:Area Administrator\, Assistant\n EMAIL\;TYPE=INTERNET:\n jfriday@host.com\nEND:VCARD\n
This vCard fragment has one property whose value is another vCard, and could be represented as an hCard fragment with an embedded hCard, literally (with the unnecessary type=internet default omitted, and the implied n optimization):
<div class="agent vcard"> <a class="email fn" href="mailto:jfriday@host.com">Joe Friday</a> <div class="tel">+1-919-555-7878</div> <div class="title">Area Administrator, Assistant</div> </div>
this hCard could be displayed as:
Joe Friday
+1-919-555-7878
Area Administrator, Assistant
3.1.1 FN Type Definition
FN:Mr. John Q. Public\, Esq.
this vCard fragment as an hCard fragment:
<span class="fn">Mr. John Q. Public, Esq.</span>
this hCard fragment could be displayed as:
Mr. John Q. Public, Esq.
3.1.2 N Type Definition
Example 1
N:Public;John;Quinlan;Mr.;Esq.
this vCard fragment as an hCard fragment:
<span class="n"> <span class="honorific-prefixes">Mr.</span> <span class="given-name">John</span> <span class="additional-names">Quinlan</span> <span class="family-name">Public</span>, <span class="honorific-suffixes">Esq.</span> </span>
with singular class names instead of plural (see Issue 1 in hcard-parsing).
<span class="n"> <span class="honorific-prefix">Mr.</span> <span class="given-name">John</span> <span class="additional-name">Quinlan</span> <span class="family-name">Public</span>, <span class="honorific-suffix">Esq.</span> </span>
this hCard fragment could be displayed as:
Mr. John Quinlan Public, Esq.
Example 2
N:Stevenson;John;Philip,Paul;Dr.;Jr.,M.D.,A.C.P.
this vCard fragment as an hCard fragment:
<span class="n"> <span class="honorific-prefixes">Dr.</span> <span class="given-name">John</span> <ul class="additional-names"> <li>Philip</li> <li>Paul</li> </ul> <span class="family-name">Stevenson</span>, <ul class="honorific-suffixes"> <li>Jr.</li> <li>M.D.</li> <li>A.C.P.</li> </ul> </span>
and with this CSS2(.1) style sheet:
.n ul,.n li { display:inline; list-style:none }
.honorific-suffixes li:before {
content:", "; margin-left:-.7ex;
}
In a CSS2(.1) compliant browser, this hCard fragment would be displayed as:
Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.
In a CSS1 compliant browser (lacking some CSS2 features), this hCard fragment would be displayed as:
Dr. John Philip Paul Stevenson Jr. M.D. A.C.P.
Note the lack of commas, which we are unable to insert inbetween the items on the list (since no character data is allowed directly inside the <ul>), and the lack of CSS2(.1) generated content support means the style rule that inserts them doesn't take effect either.
However, with singular class names instead of plural (see Issue 1 in hcard-parsing).
<span class="n"> <span class="honorific-prefix">Dr.</span> <span class="given-name">John</span> <span class="additional-name">Philip</span> <span class="additional-name">Paul</span> <span class="family-name">Stevenson</span>, <span class="honorific-suffix">Jr.</span>, <span class="honorific-suffix">M.D.</span>, <span class="honorific-suffix">A.C.P.</span> </span>
without any special style sheet, this hCard fragment would be displayed as:
Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.
This is another good reason to go with singular class names.
3.1.3 NICKNAME Type Definition
Example 1
NICKNAME:Robbie
this vCard fragment as an hCard fragment:
<span class="nickname">Robbie</span>
this hCard fragment could be displayed as:
Robbie
Example 2
NICKNAME:Jim,Jimmie
this vCard fragment as an hCard fragment:
<ul class="nickname"><li>Jim</li><li>Jimmie</li></ul>
and with this CSS2(.1) style sheet:
ul.nickname,.nickname li { display:inline; list-style:none }
.nickname li:before {
content:", "; margin-left:-.7ex;
}
.nickname li:first-child:before {
content:""; margin-left: 0;
}
In a CSS2(.1) compliant browser, this hCard fragment would be displayed as:
Jim, Jimmie
In a CSS1 compliant browser (lacking some CSS2 features), this hCard fragment would be displayed as:
Jim Jimmie
Note the lack of a comma, which we are unable to insert inbetween the item(s) on the list (since no character data is allowed directly inside the <ul>), and the lack of CSS2(.1) generated content support means the style rule that inserts them doesn't take effect either.
The class name "nickname" is already singular, and if we simply treat it as such per issue 1 in hcard-parsing, we can encode this hCard fragment as:
<span class="nickname">Jim</span>, <span class="nickname">Jimmie</span>
without any special style sheet, this hCard fragment would be displayed as:
Jim, Jimmie
This is another good reason to go with singular class names, or in this case, a singular interpretation of the class name.
3.1.4 PHOTO Type Definition
Example 1
PHOTO;VALUE=uri:http://www.abc.com/pub/photos/jqpublic.gif
this vCard fragment as an hCard fragment:
<img class="photo" src="http://www.abc.com/pub/photos/jqpublic.gif" alt="" />
Example 2
PHOTO;ENCODING=b;TYPE=JPEG:MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0 <...remainder of "B" encoded binary data...>
this vCard fragment as an hCard fragment (line breaks inserted into src value for readability):
<img class="photo" src="data:image/jpeg;base64,MIICajCCAdOgAwIBAgICBEUwDQYJKoZIhvcN AQEEBQAwdzELMAkGA1UEBhMCVVMxLDAqBgNVBAoTI05ldHNjYXBlIENvbW11bm ljYXRpb25zIENvcnBvcmF0aW9uMRwwGgYDVQQLExNJbmZvcm1hdGlvbiBTeXN0 ...remainder of B encoded binary data..." alt="" />
3.1.5 BDAY Type Definition
Example 1
BDAY:1996-04-15
this vCard fragment as an hCard fragment:
<abbr class="bday" title="1996-04-15">April 15, 1996</abbr>
this hCard fragment could be displayed as:
April 15, 1996
Example 2
BDAY:1953-10-15T23:10:00Z
this vCard fragment as an hCard fragment:
<abbr class="bday" title="1953-10-15T23:10:00Z">Oct 15, 1953</abbr>
this hCard fragment could be displayed as:
Oct 15, 1953
Example 3
BDAY:1987-09-27T08:30:00-06:00
this vCard fragment as an hCard fragment:
<abbr class="bday" title="1987-09-27T08:30:00-06:00">Sept 9, 1987</abbr>
this hCard fragment could be displayed as:
Sept 9, 1987
3.2.1 ADR Type Definition
ADR;TYPE=dom,home,postal,parcel:;;123 Main Street;Any Town;CA;91921-1234
this vCard fragment as an hCard fragment:
<div class="adr"> <abbr class="type" title="dom">US</abbr> <span class="type">home</span> address, for <abbr class="type" title="postal">mail</abbr> and <abbr class="type" title="parcel">shipments</abbr>: <div class="street-address">123 Main Street</div> <span class="locality">Any Town</span>, <span class="region">CA</span>, <span class="postal-code">91921-1234</span> </div>
this hCard fragment could be displayed as:
US home address, for mail and shipments:
Any Town, CA, 91921-1234
3.2.2 LABEL Type Definition
LABEL;TYPE=dom,home,postal,parcel:Mr.John Q. Public\, Esq.\n Mail Drop: TNE QB\n123 Main Street\nAny Town\, CA 91921-1234 \nU.S.A.
this vCard fragment as an hCard fragment:
<nowiki> Please use the following address label for <div class="label"> <abbr class="type" title="dom">local delivery</abbr> <abbr class="type" title="home">to my home</abbr> <abbr class="type" title="postal">of mail</abbr> <abbr class="type" title="parcel">and packages:</abbr> <pre> Mr.John Q. Public, Esq. Mail Drop: TNE QB 123 Main Street Any Town, CA 91921-1234 U.S.A.
</nowiki>
Note: the above hCard fragment uses a <pre> tag inside a property value to capture/represent explicit carriage returns ("\n" characters) from the vCard fragment.
this hCard fragment could be displayed as:
Please use the following address label for local delivery to my home of mail and packages:
Mr.John Q. Public, Esq. Mail Drop: TNE QB 123 Main Street Any Town, CA 91921-1234 U.S.A.
Other
- See hcard-brainstorming for more examples (which may eventually be moved here) and analysis.