Question

I am working on a project where I am sending html to a PDF creator, so I’m not too worried about proper html as long as it shows up correctly on the PDF.

I am currently working on a PDF where about half the page is in a different size font than the other. I was hoping to accomplish this easily by putting tags around the selection. However, there are tables and lists which are not inheriting the css styles.

For example:

CSS:

.fs8
{
    font-size:8pt;
}

HTML:

...
<p>Size 10 text here...</p>

<span class='fs8'>

<p>This text is size 8</p>

<table>
    <tr>
        <td>This text is NOT size 8</td>
    </tr>
</table>

<p>Still size 8...</p>

<ul>
    <li>NOT size 8!
</ul>

</span>

<p>Size 10 again...</p>

Is there any good way to span across tables and lists, so I don’t have to add class tags in hundreds of places?

Answer 1

you should use a div instead of a span because span is by default an inline element, meaning it should not contain block level elements, such as table or ul. Now for the CSS.

.fs8 {
  font-size: 8px;
}
.fs8 table,
.fs8 ul {
  font-size: 10px; /* not 8px */
}

That should do the trick. You will not need to add classes to any items except the wrapping div, remember it cannot be a span, so replace it with a div for proper behavior.