hazardsymbol not displayed in Webhelp v23.1

steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

hazardsymbol not displayed in Webhelp v23.1

Post by steinbacherGE » Mon Apr 12, 2021 6:29 pm

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
image.png (11.7 KiB) Viewed 430 times
Webhelp (v22.1) and HTML5 output

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

Thanks,

Leroy
Attachments
Webhelp22-html5.png
Webhelp22-html5.png (26.23 KiB) Viewed 430 times
image.png
image.png (17.38 KiB) Viewed 430 times

julien_lacour
Posts: 182
Joined: Wed Oct 16, 2019 3:47 pm

Re: hazardsymbol not displayed in Webhelp v23.1

Post by julien_lacour » Fri Apr 16, 2021 11:59 am

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
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: hazardsymbol not displayed in Webhelp v23.1

Post by steinbacherGE » Tue Apr 27, 2021 7:35 pm

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
inspect-td.png (45.98 KiB) Viewed 313 times
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
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: hazardsymbol not displayed in Webhelp v23.1

Post by steinbacherGE » Wed Apr 28, 2021 4:52 pm

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
Posts: 182
Joined: Wed Oct 16, 2019 3:47 pm

Re: hazardsymbol not displayed in Webhelp v23.1

Post by julien_lacour » Thu Apr 29, 2021 2:24 pm

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
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: hazardsymbol not displayed in Webhelp v23.1

Post by steinbacherGE » Thu Apr 29, 2021 9:52 pm

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

Thanks!

Leroy

Post Reply