Global Core Electronic Medicinal Product Information (ePI)
1.1.0 - trial-use International flag

Global Core Electronic Medicinal Product Information (ePI), published by HL7 International / Biomedical Research and Regulation. This guide is not an authorized publication; it is the continuous build for version 1.1.0 built by the FHIR (HL7® FHIR® Standard) CI Build. This version is based on the current content of https://github.com/HL7/emedicinal-product-info/ and changes regularly. See the Directory of published versions

Technical Style Guide

Page standards status: Informative

Technical Details · XHTML & Narrative

Implementation Rules & Best Practices

Standard formatting and content structures for ePI narrative content — ensuring consistency, quality, and global interoperability across jurisdictions.

Jump to: Guidance Narrative Tags Style Classes Lists Hyperlinks Escape Chars Symbols Diacriticals Tables Images Languages Math References
ℹ️ Scope This guide covers technical structure, XHTML compliance, and internal style attributes (text, tables, images). It does not include regulatory content requirements or external brand-specific styling.
⚠️ Important Do not include inline styling (fonts, colors, layouts) within the ePI document. Styling must remain in a separate stylesheet (CSS or XSLT). The only exceptions are basic inline formatting: bold, underline, italics, and text alignment.
What This Guide Covers
📄
Structure & Formatting

Separate content from style using external CSS/XSLT.

🌐
ePI Structure (XML/JSON/XHTML)

FHIR structured elements use XML or JSON. Narrative text is XHTML inside <div> tags.

♿
Accessibility & Mobile-First

WCAG Level AA. Fluid tables, relative font sizes, scalable images.

🧮
Tables & Lists

Rules for table structure, borders, colspan/rowspan, and nested lists.

🖼️
Images & Media

SVG preferred. Base64 embedded within a Contained Binary resource.

🔣
Characters & Symbols

Escape characters, diacriticals, common symbols, and named entities for XML-safe content.

Narrative Text — Allowed Elements
📝 Valid Top-Level Tags in ePI Narrative
<p> — Paragraph
Standard text blocks. Can contain <strong>, <em>, <sup>, <sub>, <img>. Do not nest lists or tables inside <p>.
<ol> / <ul> — Lists
Must only contain <li> children. List items may contain <div>, <p>, <img>, or nested lists.
<table> — Table
Use width="100%" for fluid layouts. Always include <thead> and <tbody>.
<footer> — Footer
Used for footnotes at the end of a section. May contain <p> and <a>.
<span> — Inline Span
For applying inline style classes to words or phrases without a block element.
Key Rules — Dos and Don'ts
✅ Formatting Rules
✅ Do
Use <strong> for bold
❌ Don't use <b>. The semantic <strong> tag improves accessibility.
✅ Do
Use <em> for italics
❌ Don't use <i>. Use <em> for semantic emphasis.
✅ Do
Use em/rem for font sizes
❌ Don't use fixed px font sizes — breaks mobile responsiveness.
✅ Do
Use width: 100% for tables
❌ Don't use fixed pixel widths — causes horizontal scrolling on mobile.
✅ Do
Use max-width: 100% for images
❌ Don't use fixed dimensions. Always include descriptive alt text.
✅ Do
Use UTF-8 character encoding
Ensures consistent cross-system text representation for all characters.
Inline Style Classes Reference
Class NamePreviewCSS Equivalent
boldBold Text{ font-weight: bold }
italicsItalics Text{ font-style: italic }
underlineUnderlined Text{ text-decoration: underline }
strikethroughStrikethrough Text{ text-decoration: line-through }
left / right / center / justifyText Alignment{ text-align: left|right|center|justify }
border-left / right / top / bottomBorder Side{ border-[side]: 1px solid grey }
arabic / little-roman / big-roman1, 2, 3 / i, ii, iii / I, II, III{ list-style-type: decimal|lower-roman|upper-roman }
little-alpha / big-alphaa, b, c / A, B, C{ list-style-type: lower-alpha|upper-alpha }
disc / circle / square / unlist● / ○ / ■ / (none){ list-style-type: disc|circle|square|none }
Lists

<ul> and <ol> tags must only contain <li> children. <li> items can contain <div>, <p>, headings, images, and tables as children.

XHTML StructureRendered Output
 
<ol>
  <li>Bullet text #1</li>
  <li>
    <div><p>Bullet text #2</p>
      <ul>
        <li>Sub-bullet #1</li>
        <li>Sub-bullet #2</li>
      </ul>
    </div>
  </li>
</ol>
  1. Bullet text #1

  2. Bullet text #2

    • Sub-bullet #1
    • Sub-bullet #2
🔗 Anchor Tag Usage

Use the <a> tag with its href attribute for hypertext links within ePI narrative. Example:

<a href="https://example.com">Visit site</a>

📌 Internal Section Links

Use anchor IDs for in-document cross-references between sections:

<a href="#section-4">See Section 4</a>

Escape Characters

The following characters are reserved in XML and must be escaped. Web browsers automatically convert escaped forms back to normal display characters.

Character NameDisplayEscaped Form (XML)
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Quotes"&quot;
Apostrophe'&apos;
Common Symbols

Symbols can be added as regular UTF-8 text or replaced with named entities. Refer to W3C resources for a comprehensive list.

ResultDescriptionNamed EntityNumeric
 Non-breaking space&nbsp;&#160;
<Less than&lt;&#60;
>Greater than&gt;&#62;
≤Less than or equal to—&#8804;
≥Greater than or equal to—&#8806;
&Ampersand&amp;&#38;
©Copyright&copy;&#169;
®Registered trademark&reg;&#174;
°Degree sign&deg;&#176;
€Euro&euro;&#8364;
βBeta&beta;—
Diacritical Marks

Diacritical marks use combining numeric character references. Refer to W3C resources for a comprehensive list.

MarkCharacterConstructResult
`aa&#768;à
´aa&#769;á
^aa&#770;â
~aa&#771;ã
`OO&#768;Ò
´OO&#769;Ó
Tables

Only <thead>, <tbody>, <tfoot>, <caption>, and <colgroup> are permitted as direct children of <table>. Do not use tables for layout and alignment.

<table>Defines a table
<caption>Table title (keep inside table)
<thead>Groups header rows
<tbody>Groups body rows
<tfoot>Groups footer rows (keep footnotes inside table)
<tr>Defines a row
<th>Defines a header cell
<td>Defines a data cell
colspan / rowspanMerge cells across columns / rows
Images
🖼️ Preferred Format: SVG

SVG (Scalable Vector Graphics) is preferred for ePI images due to lossless scalability across devices. JPEG and PNG are acceptable for legacy content only.

📦 Embedding: Base64 Binary

All images must be embedded as Base64 objects within a Contained Binary resource to ensure the ePI is exchanged as a single self-contained file.

♿ Accessibility: alt Text

Always include descriptive alt text for every image. Ensure colors within images meet WCAG Level AA contrast requirements.

📱 Responsiveness

Use max-width: 100%; height: auto; for all images to ensure they scale correctly across desktop and mobile viewports.

Audio & Video
ℹ️ Best Practice Do not embed audio or video files directly within an ePI. Instead, link to external copies using the <a> tag. Always check local regulations to confirm if audio and video are permitted in your jurisdiction.
Languages
🌍 One Language per ePI

Each language must be a separate ePI document. Do not mix multiple languages within a single ePI Composition.

↔️ Text Direction

Text direction (e.g., RTL for Arabic, vertical for Japanese) is managed by the stylesheet — not the underlying XML/JSON content.

Math Formulas
∑ MathML is not currently supported in FHIR ePI
Simple Formulas
Recreate using inline narrative tags. Example: a + b<sup>2</sup> renders as a + b²
Complex Formulas
Embed as images (SVG preferred) using the Contained Binary approach described in the Images section above.
Appendices & References

📚 Key References

🔣 Named Entities