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="" />

Other

• See hcard-brainstorming for more examples (which may eventually be moved here) and analysis.