Topic: Html list item marker highlight

Posted by NylonDerek · 21-04-2022 - 19:07

Hello,

I have the following HTML:

<table>
  <tbody>
    <tr>
      <td style="background-color: #a9d29a;">
        <ul>
          <li>ef awefawef awefwef</li>
          <li>ef awefasdfsdfsdfwef awefwef</li>
          <li>sxdfsxdfxsdfef awefawef awefwe</li>
        </ul>
        <ol>
          <li>xdtgerg egrser</li>
          <li>seyhy7 h7yh</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>

I'm adding this HTML to the word doc using the embedHTML function. The problem is the <li> list item markers/bullets end up with a different background/highlight color in the resulting .docx.

Screenshot snippet of the .docx output:
https://i.imgur.com/KWVguDv.png

I am unable to set or override the marker/bullet color using CSS in the HTML, or through Microsoft Word 365.

I'm using phpdocx 12.5 premium.

Any help is appreciated.

Thanks!

Posted by admin · 21-04-2022 - 20:12

Hello,

markers apply a text hightlight color when background-color is set and only allow specific colors (black, blue, cyan, green, magenta, red, yellow, white, darkBlue, darkCyan, darkGreen, darkMagenta, darkRed, darkYellow, darkGray, lightGray). Shadings are applied to whole paragraphs and allow HEX colors.

Although you could apply hightlight colors in list and paragraph contents, the best approach for your case is using the transparent value applied to the background-color style in ul and ol tags:

$html = '<table>
  <tbody>
    <tr>
      <td style="background-color: #a9d29a;">
        <ul style="background-color: transparent;">
          <li>ef awefawef awefwef</li>
          <li>ef awefasdfsdfsdfwef awefwef</li>
          <li>sxdfsxdfxsdfef awefawef awefwe</li>
        </ul>
        <ol style="background-color: transparent;">
          <li>xdtgerg egrser</li>
          <li>seyhy7 h7yh</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>';
$docx->embedHTML($html);

Regards.

Posted by NylonDerek · 21-04-2022 - 23:32

Thanks! Ended up also needing to use !important to prevent all instances from having a highlight.

Forum