hazardsymbol not displayed in Webhelp v23.1

[steinbacherGE]

The new hazardstatement formatting for Webhelp v23.1 does not display custom hazard symbols.

Code: Select all

<hazardstatement
    id="DeathOrPersonalInjuryLooseMetalObje-3F1D3B5E" type="danger">
    <messagepanel id="messagepanel_j3v_x4z_hkb">
        <typeofhazard>Death or Personal Injury!</typeofhazard>
        <howtoavoid>Loose metal objects must not be brought into the magnet
            area.</howtoavoid>
        <howtoavoid>Iron and steel materials must not be brought into the magnet
            area.</howtoavoid>
    </messagepanel>
    <hazardsymbol href="icon_magnetic-Test.png" id="hazardsymbol_k3v_x4z_hkb"/>
</hazardstatement>

Webhelp output (v23.1)

image.png

Webhelp (v22.1) and HTML5 output

Is there a way to fix this in a custom template by modifying the CSS?

Thanks,

Leroy

[julien_lacour]

Hello,

I reproduced the issue on my side and added an issue in order to resolve it in Oxygen's next version.
You can already use the following CSS in a custom style-sheet to correct the hazardsymbol display:

Code: Select all

@media screen {
  .hazardstatement {
    width: unset;
  }
  .hazardstatement--logo-col {
    width: 6%;
  }
  .hazardstatement--msg-col {
    width: 100%;
  }
}
@media print {
  .hazardstatement {
    width: 100%;
  }
  .hazardstatement--logo-col {
    width: 67px;
  }
  .hazardstatement--msg-col {
    width: fill;
  }
}

The custom style-sheet must be referenced using the args.css parameter from the transformation dialog.

Regards,
Julien

[steinbacherGE]

Thank you for the updated CSS.

I still have one remaining issue where the custom hazardsymbol is not showing up.

The GE Healthcare hazard statement standard allows for hazardstatement type="notice". We do not include the generic hazard symbol for this type, but we do allow for a custom hazardsymbol if needed.

Example:

Code: Select all

<hazardstatement type="notice">
	<messagepanel>
		<typeofhazard>Static discharge</typeofhazard>
		<howtoavoid>Anti-static wrist strap must be worn for removing/installing
		boards.</howtoavoid>
	</messagepanel>
	<hazardsymbol href="icon_staticelec.png"/>
</hazardstatement>

When I instpect the td element in the output, I can see the css that is hiding this column (display: none;).

If I deselect it in Chrome developer tools, the symbol is displayed.

inspect-td.png

But, when I try to override this in my custom css file by adding not(.hazardstatement_notice), there is no change in the output

Code: Select all

*[class ~= "hazard-d/hazardstatement"]:not(.hazardstatement_danger):not(.hazardstatement_warning):not(.hazardstatement_caution):not(.hazardstatement_notice) .hazardstatement--logo-col {
  display: none !important;
}

*[class ~= "hazard-d/hazardstatement"]:not(.hazardstatement_danger):not(.hazardstatement_warning):not(.hazardstatement_caution):not(.hazardstatement_notice) th {
  table-column-span: 1 !important;
}

*[class ~= "hazard-d/hazardstatement"]:not(.hazardstatement_danger):not(.hazardstatement_warning):not(.hazardstatement_caution):not(.hazardstatement_notice):not(.hazardstatement_notice) td:first-of-type {
  display: none !important;
}

Is there a way to override this universal selector? Or, should I create seperate css that only applies to type="notice"

Any other suggestions?

This worked for us in previous releases of Webhelp, but the recent hazard statement changes have required us to redo our customizations.

Thanks,

Leroy

[steinbacherGE]

I figured out a way to display the optional hazardsymbol for <hazardstatement type="notice">.

I added the following to my custom .css file.

Code: Select all

table.notice > tbody > tr > td:first-of-type {
    display: inline-block !important;
    width: 80px;
}

table.notice > tbody > tr > td > svg {
    display: none !important;
}

table.notice > tbody > tr > td:nth-of-type(2) {
    display: inline-block !important;
}

This displays the first column for type="notice".

It also hides the generic SVG hazardsymbol. If a custom hazardsymbol is included, it is displayed as expected.

I also needed to fix the alignment of the msg col (2nd td).

Is there a better way to handle this?

I'm not familiar with universal selectors, so I'm not sure what is the best way to override them. But, this seems to work.

Let me know if you have any other suggestions.

Thanks,

Leroy

[julien_lacour]

Hello,

Sorry for my delayed answer, you can use the following selectors inside your custom style-sheet:

Code: Select all

/* Add hazard icon on notices. */
*[class ~= "hazard-d/hazardstatement"].hazardstatement_notice .hazardstatement--logo-col {
  display: table-column !important;
}

*[class ~= "hazard-d/hazardstatement"].hazardstatement_notice th {
  table-column-span: 2 !important;
}

*[class ~= "hazard-d/hazardstatement"].hazardstatement_notice td:first-of-type {
  display: table-cell !important;
}

These rules will override the default rules that hide the column containing the logo.

Regards,
Julien

[steinbacherGE]

No problem. Thank you for the CSS suggestion. This is a better solution.

Thanks!

Leroy