Best method for making PDF+HTML note boxes with icons

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
Fiztban
Jr. Propeller Head
Posts: 8
Joined: Fri Aug 23, 2019 6:44 am

Best method for making PDF+HTML note boxes with icons

Post by Fiztban »

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

Code: Select all

<p class="note">Delete this text and replace it with your own content.</p>
The CSS part

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;
}
The folder SVG:

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>
This outputs brilliantly to HTML as follows:
Untitled.png
But in PDF I cannot seem to control the size of the background image no matter what I do!
Untitled2.png
The PDF also seems to like cutting the content! What can I do to make these work together and look the same?
You do not have the required permissions to view the files attached to this post.
Folkie
Propeller Head
Posts: 29
Joined: Sun Oct 27, 2013 8:55 am

Re: Best method for making PDF+HTML note boxes with icons

Post by Folkie »

We just use a png for our warning/note/info/tip images, created at the size we want it to be in the output so it's fixed and doesn't resize. It works well for both PDF and HTML output.

Our code is based on the examples in this article CSS Tip: Creating Styled Boxes for Notes, Warnings, Examples, and Tips We don't have any problem with the text getting cut.

Code: Select all

p.Note
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: #fffef0;
	background-image: url('../Images/1_Global_CommonIcons/note.png');
	background-position: 9px 0px;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	padding: 5px 5px 5px 40px;
	page-break-inside: avoid;
	border: solid 1px #F48132;
}
It looks the same in both HTML and PDF output:
note_example.png
Jane
You do not have the required permissions to view the files attached to this post.
Post Reply