Simple style elements don't work in PDF output

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
MGerber
Jr. Propeller Head
Posts: 9
Joined: Mon Mar 27, 2017 6:23 am
Location: Northern Germany

Simple style elements don't work in PDF output

Post by MGerber »

Hi!

I have a simple span style to show letters or even words in keyboard design. I use a single CSS for all outputs. Each style is used in common (Medium: (default)). Oh, and: Flare 2017 r3.

Code: Select all

span.Keyboard
{
	border: solid 1px #dcdcdc;
	border-radius: 4px;
	background-color: #fffdf7;
	padding: 1px 3px;
}
So, nothing really special here.

I use PDF output primarily. However, not all elements of this style are applied there. Background color and border are rendered as intended, the padding is ignored (see pictures below).

What I've tested and notes:
  • Increased the padding to large values and changed the unit in order to see if this changes anything.
  • Built the whole PDF. No difference to PDF preview.
  • Web output works as expected (picture below).
  • Found another thread where also problems with CSS styles in PDF output are described. However, without any real solution.
  • It seems that PDF rendering in Flare does not take all CSS elements into account.
  • Searched through the Flare documentation, but could not find any hints about (reduced) CSS in connection with PDF output.
My question:
Is this a bug in the PDF renderer? If not, is there any documentation about the limitations of CSS in PDF output?

Thank you for any hints
Mark
You do not have the required permissions to view the files attached to this post.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Simple style elements don't work in PDF output

Post by ChoccieMuffin »

I can't answer your question directly, but you might want to edit your stylesheet to insert a non-breaking space before and after in your span and see what happens. That might do the trick, but check both outputs, as you might need to remove the padding so your web output isn't too wide.

See this link https://developer.mozilla.org/en-US/doc ... S/::before for a much better explanation.

Good luck.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
kydeck
Jr. Propeller Head
Posts: 8
Joined: Thu May 03, 2018 12:38 pm

Re: Simple style elements don't work in PDF output

Post by kydeck »

MGerber wrote:Hi!

I have a simple span style to show letters or even words in keyboard design. I use a single CSS for all outputs. Each style is used in common (Medium: (default)). Oh, and: Flare 2017 r3.

Code: Select all

span.Keyboard
{
	border: solid 1px #dcdcdc;
	border-radius: 4px;
	background-color: #fffdf7;
	padding: 1px 3px;
}
So, nothing really special here.

I use PDF output primarily. However, not all elements of this style are applied there. Background color and border are rendered as intended, the padding is ignored (see pictures below).

What I've tested and notes:
  • Increased the padding to large values and changed the unit in order to see if this changes anything.
  • Built the whole PDF. No difference to PDF preview.
  • Web output works as expected (picture below).
  • Found another thread where also problems with CSS styles in PDF output are described. However, without any real solution.
  • It seems that PDF rendering in Flare does not take all CSS elements into account.
  • Searched through the Flare documentation, but could not find any hints about (reduced) CSS in connection with PDF output.
My question:
Is this a bug in the PDF renderer? If not, is there any documentation about the limitations of CSS in PDF output?

Thank you for any hints
Mark
From my web-dev experience, your css only works in browsers because modern browsers are great at helping us coders out, but the PDF output is not so forgiving.

The short answer: <span>s do not respect padding styles by default, and that's showing in the PDF output. You can possibly fudge the look of it by adding non-breaking spaces before and after the text inside of the span, and changing the line-height to add top/bottom spacing.

The long-winded answer:

There are two main types of ways that elements 'display' (and several more not worth mentioning right now). They are: block-level elements and inline-elements. Structural elements such as <div>s are block-level by default, text-based elements like <span>, <b>, <i> etc. are inline by default. Inline elements DO NOT respect padding, width, height, and various other CSS styles that block-level elements do, but inline elements have benefits such as inherently being able to line-up horizontally with other inline elements (much like text characters you type-out) while block-level elements want to ALWAYS be on their own line and do not line-up horizontally by default. There is a hybrid display property that is literally "inline-block", but as far as I can tell this is not supported by PDF output.
MGerber
Jr. Propeller Head
Posts: 9
Joined: Mon Mar 27, 2017 6:23 am
Location: Northern Germany

Re: Simple style elements don't work in PDF output

Post by MGerber »

Hello ChoccieMuffin, hello kydeck,

Thank you very much for your input. Sorry for the late reply, I wasn't at my desk for some days. I will take a look at it and give feedback here in the next days.

Mark
MGerber
Jr. Propeller Head
Posts: 9
Joined: Mon Mar 27, 2017 6:23 am
Location: Northern Germany

Re: Simple style elements don't work in PDF output

Post by MGerber »

Just for you Information:

The workaround at the moment is to insert a character in the same color as the background in front and behind the given text.

Code: Select all

@media print
{
	span.Keyboard::before,
	span.Keyboard::after
	{
		border: inherit;
		border-radius: inherit;
		background-color: inherit;
		color: #fffdf7;
		content: "|";
	}

}
The inherited elements are written here, because the PDF would use the background color of the HTML body and also not the right border.

This may not be the most elegant solution, however it works for now. If anybody copies text from the final PDF, the "Keyboard"-formatted text will then be embraced by two vertical lines. That's okay for my use case.

PDF output and CSS are really tricky to handle in Flare. Much try and error (not only in this case)... :(

Greetings
Mark
Post Reply