Purpose and Context
Styling information in the context of ePI refers to the way content can be displayed in a document or on a webpage. It considers aspects such as font styles (family, size, color), layout (margins, padding, positioning), and other visual properties.
Styling information is important for compliance with regulator requirements (e.g., the QRD [Quality Review of Documents] template and convention), to convey the correct meaning (e.g., italics superscript) and to provide the best user experience.
This style guide aims to:
This style guide aims to:
- instruct applicants how to incorporate styling information when importing FHIR ePI files into the PLM portal
- instruct applicants how to incorporate styling information when creating ePI using the editor at the PLM portal
- outline how and when QRD styles, as outlined it the QRD templates and QRD convention, are applied at the PLM portal
- inform consumers of ePI data about what style information to expect in data accessed from the application programming interface of the EMA-HMA-EC FHIR repository
Coming soon! The guide will be accompanied by:
- the ePI QRD Cascading Style Sheet (CSS), which is used to apply QRD styles to ePI after transformation
- an Extensible Stylesheet Language Transformation (XSLT), which can be used to transform ePI to HTML format with QRD styles
1 - ePI creation
1.1 - Creating ePI by importing FHIR
Applicants can generate FHIR ePI with their own systems/providers and subsequently import FHIR into the PLM portal and submit to the regulator. In this case, applicants must follow the guidelines outlined in ‘How to style ePI’ to ensure correct styling information in the imported FHIR files.
1.2 - Creating ePI using the editor
Applicants can create ePI in the PLM portal using the editor, and subsequently submit to the regulator.
Coming soon! When content is pasted from Word into the editor, styling/formatting will be automatically removed.
In the editor, the applicant should (re)apply the following styling to the section content:
Coming soon! When content is pasted from Word into the editor, styling/formatting will be automatically removed.
In the editor, the applicant should (re)apply the following styling to the section content:
- Superscript or subscript characters
- Underlined, bold or italic body text
- Centre or right alignment of text (all text is left aligned by default)
- Grey shading
- Any other formatting, only where it is required for the correct meaning of the content and/or required by the regulator
QRD styles (such as font type, size, colour and weight of section headings and body text, margins and spacing, and list style) will be automatically applied by the QRD style sheet and must not be added by the applicant in the editor.
2 - Viewing and accessing ePI
2.1 - Preview ePI
Users can preview their ePIs using the ‘Preview’ button on the ‘Manage ePI’ page, which opens a new tab displaying the ePI.
Coming soon! The QRD style sheet is applied, and the preview displays the ePI with QRD styles.
Coming soon! The QRD style sheet is applied, and the preview displays the ePI with QRD styles.
2.2 - Export ePI to Word
Users can export ePI as Word file(s) using the ‘Export’ button on the ‘Manage ePI’ page.
Coming soon! The QRD style sheet is applied, and the exported Word file(s) contain the PI with QRD styles.
Coming soon! The QRD style sheet is applied, and the exported Word file(s) contain the PI with QRD styles.
2.3 - Export ePI to FHIR
Users can export ePI as a FHIR XML file using the ‘Export’ button on the ‘Manage ePI’ page.
The exported FHIR XML file does not contain QRD styles. If desired, users can convert the FHIR XML file to HTML containing QRD styles using the XSLT.
The exported FHIR XML file does not contain QRD styles. If desired, users can convert the FHIR XML file to HTML containing QRD styles using the XSLT.
2.4 - Access ePI via the API
The ePI application programming interface enables access to ePI data by consuming systems.
The API response does not contain QRD styles. If desired, users can convert the ePI data to HTML containing QRD styles using the XSLT.
The API response does not contain QRD styles. If desired, users can convert the ePI data to HTML containing QRD styles using the XSLT.
3 - How to style ePI
To ensure ePIs are properly interpreted without breaking the XHTML/XML/JSON file structure, special symbols must be escaped. The required escape character sequences are shown in Table 1.
Table 1. Special symbols and required escape characters
Symbol | Must be escaped in section heading? | Must be escaped in section content? | Escape character sequence |
& | Yes | Yes | & or & |
< | Yes | Yes | < or < |
> | Yes | Yes | > or > |
" | Yes | Not necessary | " or " |
' | Yes | Not necessary | ' or ' |
3.2 - Section headings
Section headings in ePI are standard text, as defined in FHIR's string primitive datatype
Section headings cannot contain HTML tags or style attributes.
Applicants are not required to add styles for section headings to their FHIR XML files.
QRD styles are managed by the style sheet as described in Table 2.
Section headings cannot contain HTML tags or style attributes.
Applicants are not required to add styles for section headings to their FHIR XML files.
QRD styles are managed by the style sheet as described in Table 2.
Table 2. Section headings
Section heading type | Tag/style added by applicant | Style added by QRD style sheet |
SmPC Level = 1 (e.g., SUMMARY OF PRODUCT CHARACTERISTICS) | None | Class name: epi__smpc--level-1
|
SmPC Level = 2 (e.g., 1. NAME OF THE MEDICINAL PRODUCT) | None | Class name: epi__smpc--level-2
|
SmPC Level = 3 (e.g., 4.1 Therapeutic indications) | None | Class name: epi__smpc--level-3
See details above Class name: number See details above Class name: aligned-text See details above |
SmPC Level = 4 (e.g., Posology) | None | Class name: epi__smpc--level-4
|
SmPC Level = 5 (e.g., Paediatric population) | None | Class name: epi__smpc--level-5
|
Annex II Level = 1 (e.g., ANNEX II) | None | Class name: epi__annexii--level-1 Same style attributes as epi__smpc--level-1 |
Annex II Level = 2 (e.g., A. MANUFACTURER(S) RESPONSIBLE FOR BATCH RELEASE) | None | Class name: epi__annexii--level-2 Same style attributes as epi__smpc--level-2 |
Annex II Level = 3 (e.g., Periodic safety update reports (PSURs)) | None | Class name: epi__annexii--level-3 Same style attributes as epi__smpc--level-3 |
Labelling Level = 1 (e.g., LABELLING) | None | Class name: epi__labelling--level-1 Same style attributes as in epi__smpc--level-1 |
Labelling Level = 2 (e.g., PARTICULARS TO APPEAR ON THE OUTER PACKAGING AND THE IMMEDIATE PACKAGING) | None | Class name: epi__labelling--level-2
Class name: epi__labelling--level-2-border
|
Labelling Level = 3 (e.g., 1. NAME OF THE MEDICINAL PRODUCT) | None | Class name: epi__labelling--level-3 Same style attributes as epi__labelling--level-2 Class name: epi__labelling--level-3-border Same style attributes as epi__labelling--level-2-border Class name: row See details above Class name: number See details above Class name: aligned-text See details above |
Package leaflet Level = 1 (e.g., PACKAGE LEAFLET) | None | Class name: epi__packageleaflet--level-1 Same style attributes as epi__smpc--level-1 |
Package leaflet Level = 2 (e.g., 1. What Cefuroxema is and what it is used for) | None | Class name: epi__packageleaflet--level-2 Same style attributes as epi__smpc--level-2 Class name: row See details above Class name: number See details above Class name: aligned-text See details above |
Package leaflet Level = 3 (e.g., Warnings and precautions) | None | Class name: epi__packageleaflet--level-3 Same style attributes as epi__smpc--level-3 |
3.3 - Section content
Section content is XHTML, as defined in FHIR's narrative xhtml type (https://www.hl7.org/fhir/narrative.html#xhtml).
Tags listed in Table 2. must be used for section content. Standard QRD styles will be applied by the QRD style sheet (see Table 2) and must not be added by the applicant.
Tags listed in Table 2. must be used for section content. Standard QRD styles will be applied by the QRD style sheet (see Table 2) and must not be added by the applicant.
Table 3. Section content
Content type | Tag added by applicant | Style added by QRD style sheet |
Text | <p> | font-family: "Times New Roman", Times, serif; font-size: 11pt; color: #000; line-height: normal; margin: 0; |
Text emphasis elements | <em> <strong> | font-style: italic; font-weight: bold; |
Lists | <ul> <ol> <li> | ul list-style-type: disc; ul ul list-style-type: circle; ul ul ul list-style-type: square; ol ol ol ol ol ol list-style-type: decimal; ul ol margin: 0; padding: 0; list-style-position: outside; padding-left: 0.5cm; li padding-left: 0.5 cm; margin-left: 0.5cm; |
Scientific notation elements | <sub> <sup> | sub, sup
|
Tables (Note: use of <caption> and scope recommended for WCAG AA compliance) | <table> <th> <td> <thead> <caption> <foot> <img> | table
table th,
table caption
table foot
table img
|
3.4 - Styles not included in QRD style sheet
⚠ Additional styling should only be added in the ePI when specifically required by the applicant/authority.
Any unnecessary additional styling will reduce the portability and reusability of the ePI data.
Any unnecessary additional styling will reduce the portability and reusability of the ePI data.
In case the applicant/authority requires specific styles in addition to the standard QRD styles applied by the style sheet, they must be added using one of the following options:
1. Add an inline style to a whole paragraph using the style attribute in the paragraph element.
For example: <p style="color: red;">This whole paragraph is red using inline style.</p>
2. Add an inline style to a few words using the style attribute in a span element
For example: <p>This is <span style="color: red;">red text</span> using a span element with inline style.</p>
3.5 - Boxed warning
Boxed warning text must have a border applying the following inline styles to the whole paragraph:
border: 1px solid black;
padding: 5px;
margin-bottom: 1em
Tables must not be used for boxed warnings.
border: 1px solid black;
padding: 5px;
margin-bottom: 1em
Tables must not be used for boxed warnings.
3.6 - Shaded text
Shaded text, used by applicants to highlight text which will not be printed, should have the following inline style applied using the style attribute and the span element, as follows:
<p><span style="background-color: silver;">Grey shaded text</span>and other text</p>
<p><span style="background-color: silver;">Grey shaded text</span>and other text</p>
3.7 - Black triangle
The black triangle for medicinal products subject to additional monitoring should be entered using the Unicode character U+25BC.
Shapes must not be used for the black triangle.
Shapes must not be used for the black triangle.
3.8 - Images
Recommended attributes for <img> tags include
- alt, specifies an alternate text for an image: include a brief but meaningful description of the image to facilitate accessibility features such as screen reading (required for WCAG AA compliance)
- height, in pixels, specifies the height of an image
- width, in pixels, specifies the width of an image
- src attribute, containing the reference to the Binary resource with the image.
Images larger than 600 pixels in width will be resized.
4 - Accessibility
ePI section content should comply with WCAG Level AA.