Hazard

Hazards (embodied by the <hazardstatement> element) contain warning information. They are based on ANSI Z535 and ISO 3864 standards and may have various values set for the type (note, tip, fastpath, restriction, important, remember, attention, caution, notice, danger, warning, other).

How to Customize Hazard Statements

It is possible to customize hazard statements (<hazardstatement> elements) to add an icon, change the borders, change the colors, and more. For example, to customize the attention type hazards, add the following rules to your customization CSS:

*[class ~= "hazard-d/hazardstatement"][type = "attention"] {
  border-width: 2px;
}
*[class ~= "hazard-d/hazardstatement"][type = "attention"],
*[class ~= "hazard-d/hazardstatement"][type = "attention"] td {
  border-color: #ff9900;
}

.hazardstatement .hazardstatement--attention {
  text-align: left;
  padding-left: 3em;
  background-position: .5em .3em;
  background-image: url("danger.svg");
  background-repeat: no-repeat;
  background-color: #ff9900;
  border-color: #ff9900;
  color: black;
}

Tip: The default icon size is 24px and its URL is relative to the CSS stylesheet.

How to Customize Other Type Hazards

It is possible to create custom hazard types by using the @type and @othertype attributes. For example, to add a high voltage hazard in a microwave manual:

<hazardstatement id="hazardstatement_vzy_zdc_syb" type="other" othertype="HIGH_VOLTAGE">
    <messagepanel id="messagepanel_wzy_zdc_syb">
        <typeofhazard>Electrical Shock</typeofhazard>
        <howtoavoid>Do not disassemble or repair the microwave yourself.</howtoavoid>
    </messagepanel>
    <hazardsymbol id="hazardsymbol_z4t_gjc_syb" href="electricity_icon.svg"/>
</hazardstatement>

Tip: SVG images are preferred for the <hazardsymbol> and you should set both @height="1em" and @width="1em" to obtain a rendering that is similar to default hazards.

To customize the hazard, add the following rules to your customization CSS:

/* Change the header color. */
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--other {
  content: "HIGH VOLTAGE"; /* Change the hazard text */
  background-color: #d84b20;
  color: unset;
}

/* Show logo in the header. */
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--other::before {
  padding: .5rem;
  content: url("electricity_icon.svg");
}

/* Show logo in the left cell. */
*[othertype ~= "HIGH_VOLTAGE"] th {
  table-column-span: 2 !important;
}
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--logo-col {
  display: table-column !important;
}
*[othertype ~= "HIGH_VOLTAGE"] td:first-of-type {
  display: table-cell !important;
}
*[othertype ~= "HIGH_VOLTAGE"] .hazardsymbol {
  height: 4em; /* Change the symbol dimension */
}

The result in the PDF output would look like this:

How to Remove the Hazard Symbol

Remove the Hazard Symbol from the Header

It is possible to remove the symbol that appears in the hazard header (for example, if you consider it redundant with the symbol in the column).

To remove it, simply hide its container with the following rules in your customization CSS:

.hazardsymbol-container {
  display: none;
}

Remove the Hazard Symbol on the left of the Message Panel

It is possible to remove the column that contains the hazard symbol (for example, if you want to maximize the message panel).

To remove the caution symbols, for example, add the following rules to your customization CSS:

.hazardstatement_caution .hazardstatement--logo-col {
  display: none;
}
.hazardstatement_caution th {
  table-column-span: 1
}
.hazardstatement_caution td:first-of-type {
  display: none;
}