Flare v10 - Inconsistencies with HTML / PDF outputs

[sdcinvan]

Borrowing from this blog post, "CSS Tip: Creating Tip or Note Boxes without a Div or Table" http://www.madcapsoftware.com/blog/2013 ... -or-table/

I thought this might be a nice way of presenting my tips, notes, and warnings within my documentation.

But problems abound...
1. I cannot control the size of a bitmap .png image (background image)
2. svg works better *but* now...inexplicably, it doesn't render when published as HTML!
a) It publishes perfectly as PDF.
b) It renders in HTML preview mode but it is over-sized.
c) It previews overall-oversized in PDF.
3. The color border publishes as a different color in PDF.
4. .eps images are even worse but I don't really care about .eps (just added as an fyi)


The css...

Code: Select all

p.note_note
{
	border: solid 2px #BFD62F;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 14px 45px;
	mc-auto-number-format: '{b}Note: {/b}';
	background-repeat: no-repeat;
	background-size: 2cm 2cm;
	background-image: url('../../images/icons/question_icon.svg');
	color: #d84127;
	background-color: #f2f2f2;
	border-bottom-color: #d84127;
	border-left-color: #d84127;
	border-right-color: #d84127;
	border-top-color: #d84127;
	vertical-align: middle;
	margin: 0;
	width: auto;
	background-position: center left;
}

Any thoughts?

Custom_[p]_note.png

[patb]

You may need to specify different background sizes in your stylesheet for the default (HTML) and print (PDF) mediums.

[rob hollinger]

Looks like the background-size property for the background is the cause.

Set the size to 1cm 1cm seems to produce the results you want.

[sdcinvan]

You may need to specify different background sizes in your stylesheet for the default (HTML) and print (PDF) mediums.

If you know the secret to changing the image background size, please, please tell me.

"background-size: 1cm 1cm;" is certainly ignored by Flare (for both .png and .svg images)!

[patb]

You may need to specify different background sizes in your stylesheet for the default (HTML) and print (PDF) mediums.

If you know the secret to changing the image background size, please, please tell me.

"background-size: 1cm 1cm;" is certainly ignored by Flare (for both .png and .svg images)!

Are you setting them in the correct medium (default/print) for your output?
Rob apparently got it to work so it must be possible.

[rob hollinger]

I took a screen shot of your image and saved it as a png file. The actual size of the image I got is 47px by 47px. Converted to CM this is about 1.2cm
The 2cm setting in the original stylesheet is causing the image to blow up to 2cm and possibly padding getting involved.
When I set the size in the stylesheet to the size of the original image - it worked in print and html5 outputs.
I added this note to the default section of the CSS so both print and web would use it equally.
These are CSS3 settings and it looks like there are some issues between print and web that I will be reporting to Dev.

I attached the sample project for review.

[sdcinvan]

You may need to specify different background sizes in your stylesheet for the default (HTML) and print (PDF) mediums.

If you know the secret to changing the image background size, please, please tell me.

"background-size: 1cm 1cm;" is certainly ignored by Flare (for both .png and .svg images)!

Are you setting them in the correct medium (default/print) for your output?
Rob apparently got it to work so it must be possible.

Excellent question but yes. I do most of my .css edits in NotePad ++ and this is definitely set in the default medium. Just in case, I tested my HTML and PDF mediums and no change.

To be clear... I am testing just the .png icon because Flare appears to provide better support compared to .svg. The icon size is about 200px by 200px. It is oversized so that the document can be zoomed in without pixelization.

My style is setup as:

Code: Select all

p.note_note
{
	font: Adele Rg;
	font-size: 11pt;
	font-weight: 500;
	mc-auto-number-format: '{b}Note: {/b}';
	background-image: url('../../images/icons/ico_NOTE.png');
	background-repeat: no-repeat;
	background-size: 20px Auto;
	background-position: center left;
	background-color: #f2f2f2;
	border: solid 2px #BFD62F;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	padding: 14px 45px;
	color: #d84127;
	border-bottom-color: #d84127;
	border-left-color: #d84127;
	border-right-color: #d84127;
	border-top-color: #d84127;
	vertical-align: middle;
	margin: 0;
	width: auto;
}

Anyhow, I tested many variations of "background-size: 50px Auto;" and none of them affect the outcome... which is this:

Custom_[p]_note - 2.png

[sdcinvan]

I took a screen shot of your image and saved it as a png file. The actual size of the image I got is 47px by 47px. Converted to CM this is about 1.2cm
The 2cm setting in the original stylesheet is causing the image to blow up to 2cm and possibly padding getting involved.
When I set the size in the stylesheet to the size of the original image - it worked in print and html5 outputs.
I added this note to the default section of the CSS so both print and web would use it equally.
These are CSS3 settings and it looks like there are some issues between print and web that I will be reporting to Dev.

I attached the sample project for review.

Hello Rob,

I really appreciate your effort with this. I'm confused, I opened your project and edited the css styles for both p.note_cm and p.note_px - changing only the background-size: class. But making changes to the values had no affect on the background-image: url('../Images/question_icon.png'); appearance.

I should be able to make that icon larger or smaller by changing the background-size class, correct?

I'm I missing something?

[sdcinvan]

Some more testing...

So, it seems that Flare still doesn't render all .css changes in the XML editor.

If I preview in HTML, I see the results of changes made to the background-size: class. BUT... changes to this class still do not affect PDF preview. No matter what values I change, the PDF version always displays the same perfectly fit icon.

How is it possible that you are seeing different results?

------------------

Anyhow, going back to my project, I found that "background-size: 40px Auto;" is perfectly sized for HTML output (thanks for leading me to that conclusion). Unfortunately, my PDF still displays a supersized icon.

Slightly off topic but is there a way to add some padding (on left side) to the background image so that it doesn't touch the left-side border. I am trying to avoid the need to add white space to the icon.

[patb]

Well I've run out of ideas. I tried using your css code but I haven't upgraded yet and background-size doesn't seem to be supported in 9 so it doesn't work for me.

[rob hollinger]

In web outputs, the svg image is converted to a PNG file with the size of 35px. Thats much smaller than 2cm in the CSS and that is the cause of seeing it blown up.
The editor is not full CSS3 compliant at this point and thats why you see the original size of the image vs the blown up one.
The PDF output is using the original size of the image and ignoring the 2cm sizing set in the CSS.

Again, this is all CSS3 and we are just getting into it. We can support a lot of it, but not all of it at this point. My suggestion would be to use specific sized images and leave the size out of the css or pick sizes as close to the original as possible.
When you make images bigger or smaller via HTML or CSS, they stretch and shrink the original sizes which can cause them to look pixelated.

I will relay this info in the submitted case but also wanted to address it here to help answer questions others might have.

[sdcinvan]

In web outputs, the svg image is converted to a PNG file with the size of 35px. Thats much smaller than 2cm in the CSS and that is the cause of seeing it blown up.

But that doesn't happen if "Generate Web safe images" is turned off.

Actually, scratch all that. I've figured out how to get acceptable HTML output. The problem now is that nothing I do affects my PDF output. Please disregard the original screen capture I posted but thanks for reminding me about why the image is blurred (I had encountered this before and forgot about that).

The PDF output is using the original size of the image and ignoring the 2cm sizing set in the CSS.

But that is the problem! Why can't I change the icon's size for PDF output? This seems to be a problem that only affects background images because I am using .svg in other locations in my documentation, without difficulty.

Thanks again Rob. I appreciate your help.

[sdcinvan]

Success achieved!

How did I do it?

1) Resized the .svg's metadata inside Adobe Illustrator to a size that perfectly fits with the PDF output;
[Because apparently, I have no control over the size of a background image for PDF output.]
2) Modified background-size: class in Flare's stylesheet to a size that fits perfectly in HTML;
3) Added a Medium: non-print (HTML) class modifier a little more padding in HTML mode.
i.e.

Code: Select all

@media non-print
	p.note_note
	{
		padding: 14px 55px;
	}

At step 3, I noticed another problem.
The preview didn't work! Meaning, the padding modifier only appears when the project is published. I believe this was a v9 bug... where preview only understands/reads the default medium.

This was a good learning exercise. I'm golden now.

BTW,
1) The final Default Medium is nearly the same as the one posted above.
2) This solution only works with .svg (vector image). Just curious, does anyone know how to do this with a .png image that is *NOT* 1:1. Why *NOT* 1:1? Because if a reader expands a document past 100%, any 1:1 bitmap images will appear pixelated and that isn't cool for quality documentation. If you insist on using bitmap images then they really should start off large (i.e. 2x larger). But vector images (like .svg) nicely solve this problem.

[3lliot]

Not sure it's relevant, but there's a new general option in v10, 'Automatically resize low DPI images' - I had to switch that off to get my icons displaying properly in PDF.