Purpose and context
This style guide aims to:
Instruct applicants on how to incorporate styling information when importing FHIR ePI files into the PLM portal
Instruct applicants on how to incorporate styling information when creating ePI using the editor at the PLM portal
Outline how and when QRD styles, as outlined in the QRD templates and QRD convention, are applied at the PLM portal
inform consumers of ePI data about what style of information to expect in data accessed from the application programming interface of the EMA-HMA-EC FHIR repository
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
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:
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
Blank lines between paragraphs
Borders on tables where invisible borders are required (e.g., for the list of local representatives of the Marketing Authorisation Holder) by selecting Cell properties>Border style: hidden
2 Viewing and accessing ePI
The QRD style sheet is applied, and the preview displays the ePI with QRD styles.
The QRD style sheet is applied, and the exported Word file(s) contain the PI with QRD styles.
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 XSLT.
The API response does not contain QRD styles. If desired, users can convert the ePI data to HTML containing QRD styles using XSLT.
3 How to style ePI
Table 1. Special symbols and required escape characters
| Symbol | Must be escaped in the section heading? | Must be escaped in the section content? | Escape character sequence |
| & | Yes | Yes | & or & |
| < | Yes | Yes | < or < |
| > | Yes | Yes | > or > |
| " | Yes | Not necessary | " or " |
| ' | Yes | Not necessary | ' or ' |
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
Class name: row
Class name: number
Class name: aligned-text
|
| SmPC Level = 3 (e.g., 4.1 Therapeutic indications) | None | Class name: epi__smpc--level-3
Class name: row |
| 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 |
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,
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
|
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>
border: 1px solid black;
padding: 5px;
margin-bottom: 1em
Tables must not be used for boxed warnings.
<p><span style="background-color: silver;">Grey shaded text</span>and other text</p>
Shapes must not be used for the black triangle.
alt, specifies an alternative 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.
4 Accessibility
5 Display ePI using the QRD CSS and XSLT
The QRD CSS (ema-epi-qrd.css), which is used to apply QRD styles to ePI
an XSLT (ema-epi-html-main.xslt), which is used to transform ePI to HTML format with QRD styles
1. Install your XSLT processor of choice.
2. Run the transformation in your terminal.
3. View the output in any browser.