Best method for making PDF+HTML note boxes with icons
Posted: Mon Sep 02, 2019 4:49 am
Hi, I have been trying to make Note boxes for my content for the better part of 2 weeks so that they are correctly set up to output to both HTML and PDF. However I cannot seem to find a solution that makes them work for both. Below I will share my method and would appreciate help making it work, but I would also find it incredibly useful to know how you all have tackled this issue as I cannot be the only one having faced it.
My aim was to make it as lightweight as possible so I created a p.note class that creates a box around the paragraph, adds an icon from (preferably) SVG as a background-image and also a "NOTE_" using p.note:before. The code looks as follows:
The XHTML part
The CSS part
The folder SVG:
This outputs brilliantly to HTML as follows:
But in PDF I cannot seem to control the size of the background image no matter what I do!
The PDF also seems to like cutting the content! What can I do to make these work together and look the same?
My aim was to make it as lightweight as possible so I created a p.note class that creates a box around the paragraph, adds an icon from (preferably) SVG as a background-image and also a "NOTE_" using p.note:before. The code looks as follows:
The XHTML part
Code: Select all
<p class="note">Delete this text and replace it with your own content.</p>
Code: Select all
p.note
{
background-image: url("folder.svg");
background-position: top 1em left 1em;
background-size: 2em 2.5em;
background-repeat: no-repeat;
border: solid 1.5px #000000;
padding: 1em 2em 2em 3.5em;
margin: 3.5em;
page-break-inside: avoid;
break-inside: avoid;
font-size: 1em;
}
p.note:before
{
content: "NOTE_";
font-size: 2em;
padding-right: 0.5em;
font-weight: bold;
}
Code: Select all
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>