Care Plan HTML and CSS usage

Care Plan HTML and CSS usage

 

1. Allowed Tags Overview

Patients Know Best’s care plans accept HTML and CSS for rich multimedia displays of information to the patient. For security purposes, PKB cannot accept all tags in the medical record. This guide shows what care tags work and how they work within a care plan.

1.0 Global Tag Attributes

  • We allow the following attributes on all the following tags except base, head, html, meta, param, script, style, and title. Allowed attributes: id, style, title, class, lang

1.1 Structural Tags

  • <div>: General block container.

  • <span>: General inline container.

1.2 Text Formatting Tags

  • <p>, <h1><h6>, <b>, <i>, <u>, <strong>, <em>, <small>, <sub>, <sup>, <blockquote>, <code>, <pre>, <cite>, <samp>, <s>, <ins>, <del>, <caption>, <q>.

1.3 Input Tag

  • <input>:

    • Allowed attributes: accesskey, alt, autocomplete, checked, disabled, maxlength, name, placeholder, readonly, size, src, type, usemap, value

    • The type attribute can have the following values: hidden, text, radio, checkbox, submit, button, image, file, reset, range, number, date, time, textarea

1.4 List Tags

  • <ul>, <ol>, <li>.

1.5 Table Tags

  • <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, colgroup, col.

    • Allowed attributes: align, char, charoff, valign, height, width.

1.6 Dictionary Tags

  • <dd>, <dl>, <dt>.

1.7 Image Tag

  • <img>:

    • Allowed attributes: src, alt, width, height, name, border, align, hspace, vspace.

1.8 Anchor Tag

  • <a>:

    • Allowed attributes: href, target="_blank", onFocus, onBlur, nohref, rel, name, alt.

1.9 Iframe Tag

  • <iframe>:

    • Allowed attributes: src, allowfullscreen, frameborder, height, mozallowfullscreen, webkitallowfullscreen, width.

1.10 Label Tag

  • <label>:

    • Allowed attributes: for.

1.11 Button Tag

  • <button>:

    • Allowed attributes: name, value, disabled, accesskey.

    • The type attribute can have the following values: submit, reset, button.

1.12 Select Tag

  • <select>:

    • Allowed attributes: name, multiple, disabled, size.

    • The onchange attribute can have one specific value, which updates the colour of the select field based on the answer that was chosen: this.className = ‘form-control ' + this.options[this.selectedIndex].className;. Everything other value in the onchange is filtered out. This feature works with three colours at the moment, which need to be added to the option tags’ class inside the select, these are the following: light-yellow-faded, light-blue-faded, light-green-faded.

1.13 Option Tag

  • <option>:

    • Allowed attributes: value, label, disabled, selected.

1.14 Textarea Tag

  • <textarea>:

    • Allowed attributes: rows, name, placeholder.

1.15 Font Tag

  • <font>:

    • Allowed attributes: color, face, size.

1.16 Fieldset Tag

  • <fieldset>:

    • Allowed attributes: disabled.

1.17 Details and Summary Tag

  • <details>:

    • No attributes allowed.

  • <summary>:

    • No attributes allowed.

  • <legend>:

    • No attributes allowed.

1.18 Empty Tags

Tags explicitly allowed to be empty:

  • <br>, <hr>, <a>, <img>, <link>, <iframe>, <script>, <object>, <applet>, <frame>, <base>, <param>, <meta>, <input>, <textarea>, <embed>, <basefont>, <col>, <div>, <span>, <td>.


2. Allowed CSS Properties

There are some values, which listed in the allowed values, but they are more like representing what kind of value can be used. So for example there are the place in values like font-size: inherit, this value can be used as such. However, e.g. length is a representation of numeric value combined with length metric such as 12cm. So in practice it looks the following: font-size: 12cm and NOT font-size: length Here we list the values with examples, which are representation of some metric rather than in place usable values.

  • length

    • Example values: 3rem, 2px, 10mm, 3em, 2ex, 8cm, 2pt, 8pc

    • Practical example: font-size: 2.5rem;

  • percentage

    • Example values: 12%, 5%

    • Practical example: font-size: 3%;

  • angle

    • Example values: 5deg, 5grads, 7rad

    • Practical example: elevation: 3deg;

  • number

    • Example values: basically any number

    • Practical example: font-size-adjust: 4;

  • colorName

    • Values: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

  • systemColor

    • Values: activeborder, activecaption, appworkspace, background, buttonface, buttonhighlight, buttonshadow, buttontext, captiontext, graytext, highlight, highlighttext, inactiveborder, inactivecaption, inactivecaptiontext, infobackground, infotext, menu, menutext, scrollbar, threeddarkshadow, threedface, threedhighlight, threedlightshadow, threedshadow, window, windowframe, windowtext

  • rgbCode

    • Example values: rgb(0,128,64), rgb(255,255,255)

    • Practical example: systemColor: rgb(0,128,64);

  • colorCode

    • Example values: basically 3 or 6-digit hex code

      • #ffffff → white

      • #000000 → black

      • #0f0 → lime green

      • #abc → shorthand for #aabbcc

  • cssOnsiteUri

  • time

  • frequency

  • integer

  • positiveLength

  • positivePercentage

  • cssIdentifier

  • numberOrPercent

 

Only the following CSS properties are allowed:

2.1 Text Styling

  • font

    • Allowed values: /, caption, icon, menu, message-box, small-caption, status-bar, inherit

  • font-size

    • Allowed values: inherit, absolute-size, relative-size, lenght, percentage

  • font-size-adjust

    • Allowed values: none, inherit, number

  • font-stretch

    • Allowed values: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit

  • font-style

    • Allowed values: normal, italic, oblique, inherit

  • font-variant

    • Allowed values: normal, small-caps, inherit

  • font-weight

    • Allowed values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit

  • font-familiy

    • Allowed values: serif, arial, lucida console, sans-serif, cursive, verdana, fantasy, monospace

  • text-align

    • Allowed values: left, right, center, justify, inherit

  • text-decoration

    • Allowed values: none, underline, overline, line-through, blink, inherit

  • line-height

    • Allowed values: inherit, normal, number, length, percentage

Patients Know Best Wiki Hub | Deploy | Developer | Trust Centre | Manual | Research | Education | Release Notes

© Patients Know Best, Ltd. Registered in England and Wales Number: 6517382. VAT Number: GB 944 9739 67.