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

This guide establishes standard formatting and content structures for ePI narrative content to ensure consistency, quality, and interoperability across jurisdictions. By consolidating best practices from HL7, W3C, and modern web standards, these recommendations reduce implementation complexity, lower costs, and improve both accessibility and AI-readiness, supplementing local regulatory requirements.

Guidance

Style vs. Formatting vs. Style Sheets

Separating content from style ensures better maintainability, reusability, and multi-channel delivery (web vs. print).

• Inline Formatting: Applied directly within the ePI (e.g., Bold, Italics, Hyperlinks).
• Style Sheets (XSLT/CSS): Managed externally to handle layout, transformations (XML to PDF), and professional aesthetics (fonts, colors, interactivity).

ePI Structure (XML, JSON, XHTML)

By default, the structured elements of a FHIR document are based on Extensible Markup Language (XML) or JavaScript Object Notation (JSON).

However, there is an exception for Narrative text (E.g., paragraphs, lists, images, tables, hypertext links). Whether the ePI is XML or JSON, the narrative text is captured as EXtensible HyperText Markup Language (XHTML) or Markdown.

Markdown is a simplified standard for structuring plain text. In an ePI, Markdown is used in data fields that only require brief, basic text (E.g., Document title, section heading title).

XHTML is used in data fields that require full rich narrative text of varying lengths (E.g., paragraphs of text, tables, lists, images in the section content of a drug label).

For example, here is an ePI section structured with XML and the narrative as XHTML is within the <div> tag:

<section id="7c4f5a60-0d4e-ee11-be6e-000d3aaa06fe">
    <title value="1. What X is and what it is used for" />
    <code>
      <coding>
        <system value="https://spor.ema.europa.eu/v1/lists/200000029659/terms/" />
        <code value="200000029895" />
        <display value="1. What X is and what it is used for" />
      </coding>
    </code>
    <text>
      <status value="generated" />
      <div xmlns="http://www.w3.org/1999/xhtml">
        <p>The therapeutic indications in line with section 4.1 of the SmPC should be stated here. It should be stated in which age group the medicine is indicated, specifying the age limits, e.g. “X is used to treat {specify indication} in”.</p>
      </div>
    </text>
</section>

For example, here is an ePI section structured with JSON and the narrative as XHTML is within the div tag:

{
  "title" : "1. What X is and what it is used for",
  "code" : {
    "coding" : [
      {
        "system" : "https://spor.ema.europa.eu/v1/lists/200000029659/terms/",
        "code" : "200000029895",
        "display" : "1. What X is and what it is used for"
      }
    ]
  },
  "text" : {
    "status" : "additional",
    "div" : "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p>The therapeutic indications in line with section 4.1 of the SmPC should be stated here. It should be stated in which age group the medicine is indicated, specifying the age limits, e.g. “X is used to treat {specify indication} in</p></div>"
  }
}

Accessibility

In most jurisdictions WCAG Level AA is recommended for use.

Mobile-First Responsive Narratives

Modern ePI should be designed to render efficiently on a variety of devices, from small wearable screens to large desktop monitors. To ensure high readability and visual consistency across all viewports, implementers should follow "Mobile-First" principles:

• Fluid Table Widths: Tables should use percentage-based widths (e.g., width: 100%;) rather than fixed pixel widths to prevent horizontal scrolling on mobile devices.
• Relative Font Sizes: Use relative units like em or rem for font sizing to allow for user-scaling and responsive adjustments.
• Scalable Media: All images should be responsive (e.g., max-width: 100%; height: auto;) to fit the container viewport.

Character set

The default standard for all content characters is Unicode Transformation Format 8-bit (UTF-8).

UTF-8 is a character encoding standard used to ensure text is presented consistently when exchanged across systems.

Content Guidelines

Narrative Text

All text must be contained within one of the following five tags:

• Paragraph <p>
• Ordered list <ol>
• Unordered list <ul>
• Table <table>
• Footer <footer>

Content Span <span>

Paragraphs (<p>)

Paragraphs can contain inline tags like <strong>, <em>, <sup>, <sub>, and <img>. Use <strong> and <em> for semantic emphasis (improving accessibility) rather than <b> or <i>.

Note:

• Do not nest lists or tables inside <p> tags.
• Use CSS or multiple <p> tags for spacing rather than <br> tags.

In-line Style Attribute

The style attribute can be added to tags to apply inline formatting. E.g.,

<p style="text-decoration: underline">Underlined Sub-heading</p>

or

<p>Example of how to <span style="text-decoration: underline">underline</span> specific text</p>

The following is a list of classes that can be used together with the style attribute:

Lists

Lists are defined using the Unordered List tag <ul> (i.e., bulleted list) or the Ordered List tag <ol> (i.e., numbered or alphabetical list).

<ul> and <ol> tags must only contain List Item <li> tags as children. List Item <li> tags can contain other tags as children; e.g., divider <div>, paragraph <p>, heading <h1> to <h6>, images <img>, and tables <table>.

For example, this shows how to multiple paragraphs in a single bullet.

<ul>
<li>
<div>    
<p>Bullet text with paragraphs</p>
<p> next paragraph in the bullet </p>
</div>
</li>
<li>Next bullet</li>
</ul>
                

Nested lists are made by adding another layer of <ul> or <ol> tags as children to a List.

For example, this shows how to create a nested list with a leading paragraph.

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

Hyperlinks

The Anchor tag <a> and its attributes are used to represent hypertext links. E.g.,

Visit W3Schools.com!

Escape characters

The following characters are reserved in XML for specific purposes and must be escaped. E.g., Within the ePI’s XML, ampersand “&” cannot be used in narrative text. “&” must be used in its place.

Web browsers and apps will always convert the escaped form “&” back to the normal form “&”. The escaped form is only reserved for the XML content.

Common Symbols

Symbols can be added as regular text as long as they are UTF-8 compliant or they can be replaced with named entities. Like the escape characters mentioned in Section 4.4, web browsers or applications convert named entities back to the normal symbol in the display.

The following table is a list of commonly use symbols. Refer to the HTML specification or W3C resources for a more comprehensive list.

Diacritical Marks

Diacritical marks work in a similar manner as symbols with named entities. The following table is a list of commonly use marks. Refer to the HTML specification or W3C resources for a more comprehensive list.

Tables

The table tag <table> and its children (see table below) are used to structure a table.

Only <thead>, <tbody>, <tfoot>, <caption>, and <colgroup> tags are permitted as children of <table>.

The <th> and <td> tags may contain inline elements, paragraphs, headings, lists, and image tags as children. Only include text or content in <caption>, <th>, <td>, and <tfoot>. All other tags are only used for structure.

Note: Avoid using Tables for formatting and alignment. There are alternative best practice solutions that achieve the same objective in a standardized manner.

Example: Simple Table

Example: Merge cells across columns

Example: Merge cells across rows

Images

SVG (Scalable Vector Graphics) is the preferred format for ePI images due to its loss-less scalability across devices. JPEG and PNG formats are acceptable for legacy content, but SVG is the standard for all ePIs going forward.

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

Note:

• Always include descriptive alt text for accessibility.
• Ensure colors meet WCAG Level AA contrast requirements.

Audio and Video

It is best practice not to embed audio or video files within an ePI given their large size. Instead, the ePI should link to external copies of audio and video files.

Note: Check local regulations to confirm if audio and video files are allowed to be used with an ePI.

Languages

Each language must be a separate ePI document. Text direction (e.g., RTL for Arabic, vertical for Japanese) is managed by the style sheet rather than the underlying content.

Math Formulas

MathML is not currently supported in FHIR ePI. Recreate simple formulas using narrative tags (e.g., a + b<sup>2</sup>). Complex formulas should be embedded as images (see Images).

Appendices

References

• HL7 FHIR XHTML Styling specification - Narrative - FHIR v5.0.0
• W3Schools Online Web Tutorials
• HTML specification v4.0 - HTML 4.0 Specification
• HL7 FHIR narrative text specification - Narrative - FHIR v5.0.0
• Mathematical Markup Language (MathML) Version 3.0 2nd Edition
• Scalable Vector Graphics (SVG) 2 specification
• XHTML™ 1.0 in XML Schema
• Jordan Food and Drug Administration’s (JFDA) HTML Validator guidance - Leaflet · Debug

Named entities

• W3C Schools HTML ISO-8859-1 Reference
• ISO/IEC 8859-1:1998 - Information technology — 8-bit single-byte coded graphic character sets — Part 1: Latin alphabet No. 1