Background Image in Style Doesn't Appear in HTML5 Output

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

My tip styles have icons (a background image). The image/icon shows up perfectly in my print output, but the background image won’t show up at all in my HTML5 output.

My target has the correct stylesheet and stylesheet medium selected.

Any ideas what's going on?

**EDIT: The HTML5 output builds fine WITH the image when it's a .PNG file, but it's the .EPS file that does not show up in the HTML5 output. I'm having issues with making the images crisp and clear, not blurry, in BOTH print AND web outputs.... PNGs are blurry in print and fine in web, and EPS's are perfect in print but don't show up in Web!! Is there something I'm missing here!?**

Here’s what the print output looks like:
Tip_Print.png
Here’s the HTML5 output:
Tip_Web.png
Here’s the code:
Tip_Code.png
You do not have the required permissions to view the files attached to this post.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Nita Beck »

Someone more knowledgeable than I may wander by soon, but my first hunch would be that the format of the image -- .eps -- isn't supported by browsers. What happens if you use a different image format?
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by techwriter31 »

This doesn't resolve your EPS issue, but I've found that SVG file types produce high-quality images for both web and PDF. However, there are a few things to consider when using SVGs:
- Java has to be installed to the PC and/or build machine.
- If generating HTML Help, you will need to configure the target file to either "generate resized copies of scaled images" or "generate web-safe images" and select PNG. This is because CHM file types are based on IE7 standards, which does not support the display of SVG images. The image quality is still decent.
- If hosting the web output on a server, in IIS you will need to configure the MIME type for the .svg extension to use "image/svg+xml".

*Edit*: I should note that I only use SVGs for our notes, tips, cautions, etc., but use PNGs for all other images in our outputs.
Kellie
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

Thank you both!

Nita -- I can use PNG and it comes out crisp and clear in HTML5 output. But the PNG doesn't come out clear in PDFs (I have no idea why), and I was wanting to avoid having to create a print and non-print medium in the stylesheet for each style.

Kellie -- Great suggestion. I tried using SVG images, and they built beautifully in print but do not show up at all in my HTML5 output even after configuring the target settings and installing Java.

Hmmmm.
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by techwriter31 »

AudreyLange wrote:I tried using SVG images, and they built beautifully in print but do not show up at all in my HTML5 output even after configuring the target settings and installing Java.

Hmmmm.
Hmmm indeed! A few guesses/questions:
- Did you clear the browser cache and use CTRL+F5 to perform a refresh after clearing the cache? Or maybe tried viewing in a different browser, previously not used to view a particular topic?
- When generating the output, presumably Flare didn't return any errors stating, "JavaScript is required to process SVG files"?
- Are you viewing locally or is this output that has been published to a server?
Kellie
dorcutt
Sr. Propeller Head
Posts: 234
Joined: Thu May 15, 2014 12:16 pm

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by dorcutt »

I know there's an option in Capture to use a separate format for Print and HTML output in a pretty "single-sourced" fashion, but if you're interested, someone (or some web help) more knowledgeable than I would have to provide you details.
-Dan, Propellerhead-in-training
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

I'm still working on the image issue -- but while I'm at it, I have another question to throw out there.

((Kellie, to answer your questions:
- I did clear the cache, refresh, and view in a different browser.
- No, I didn't get any errors from Flare. When generating the output, presumably Flare didn't return any errors stating, "JavaScript is required to process SVG files"?
- Viewing it locally. It's not published to a server.))

My new question:
Does anyone know how to move the background image a tiny bit so that it isn't right smack against the edge of the background? It's smooshed up in the top left corner, touching the edges, which makes for a really awkward looking style when I have a background color and a border :(!

* I tried adjusting padding, but it only affects the text.
* I tried adjusting margins, but it doesn't move the background image within the background.
* I tried adding canvas size to the images in Photoshop, but the images became pixelated when I saved them from there.
notecorner.png
Thank y'all for your help! I'm new at cascading stylesheets and really appreciate all the feedback!
You do not have the required permissions to view the files attached to this post.
techwriter31
Propellus Maximus
Posts: 551
Joined: Wed Mar 05, 2008 10:50 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by techwriter31 »

I use divs for my notes, and use the following to control the background positioning. However, I haven't tried this when using a paragraph tag.

Code: Select all

background-position: left center;
FWIW, here's the code I use for my div notes:

Code: Select all

div.Note
{
	color: #000000;
	border-bottom: solid 1px #000000;
	border-top: solid 1px #000000;
	line-height: 11pt;
	margin-top: 6pt;
	margin-bottom: 6pt;
	padding-left: 17pt;
	padding-right: 5pt;
	padding-top: 5pt;
	padding-bottom: 5pt;
	mc-next-tag: p;
	mc-auto-number-position: inside-head;
	background-color: #e5e5e5;
	mc-auto-number-format: '{b}Note{/b}: ';
	page-break-inside: avoid;
	background-repeat: no-repeat;
	background-position: left center;
	background-image: url('../../Global_Images/Note.svg');
}
Kellie
Lydia
Sr. Propeller Head
Posts: 373
Joined: Tue Apr 23, 2013 3:19 am
Location: The Netherlands, Amsterdam Area

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Lydia »

In general, the background-position can also contain a location x/y in pixels or %. Refer to http://www.w3schools.com/cssref/pr_back ... sition.asp for more detail.
Like Kellie, I don't know how this behaves in a p tag, so you'll have to try it out.

As for the original question:
1) the different quality needs for print/online are source of many discussions. There is a Tip in the Help about images:
http://webhelp.madcapsoftware.com/flare ... ges|_____1

2) re. the eps/svg type images, I seem to remember that I needed some program like ghostscript and JRE to get those rendering and/or converting. But if there is no error message, I can't tell if this is (still) true.
Using Flare 10.2 and Flare 11 on Win 7
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by ChoccieMuffin »

As a very basic bodge, you could add a few pixels of empty space to the top and left of the icon (but it would be nice to get it to work properly, of course).
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
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

Thank y’all for all the feedback and suggestions!

Kellie & Lydia – Yay! I knew the solution had to be with background-position but I couldn’t figure out how! Lydia, that link was especially helpful. Thank you!
I used the background-position style (with percentages), and it looks awesome when I have a note that’s just 1-3 lines of text, but the problem with using percentages is that, as the note gets longer, the icon moves further down inside the note box. I’d like for the icon to always stay aligned with the word “Note” at the top, so I figured the solution would be to use pixels instead of percentages, but when I do this, the background image doesn’t show up at all. I’ve tried just 1px 1px and up to 50px, and the image just doesn’t show up. Not sure what this is all about…

:::::::::: background-position: 1% 25%; ::::::::::
Icon_PercentagesPRO.png
Icon_PercentagesCON.png

:::::::::: background-position: 5px 5px; ::::::::::
Icon_Pixels.png
You do not have the required permissions to view the files attached to this post.
Lydia
Sr. Propeller Head
Posts: 373
Joined: Tue Apr 23, 2013 3:19 am
Location: The Netherlands, Amsterdam Area

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Lydia »

Using Flare 10.2 and Flare 11 on Win 7
Lydia
Sr. Propeller Head
Posts: 373
Joined: Tue Apr 23, 2013 3:19 am
Location: The Netherlands, Amsterdam Area

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Lydia »

Tried setting pixels for the background position myself and I get the same result - the icon is gone then. This is also the case when using a div instead of a p tag.
Using Flare 10.2 and Flare 11 on Win 7
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

Ahhh, thanks Lydia. I added a comment to that thread. I'll continue researching, too. Thanks for all your help!
AudreyLange
Propeller Head
Posts: 33
Joined: Mon May 19, 2014 9:01 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by AudreyLange »

Y'all have been so helpful that I thought I'd run another style issue by you before starting a new post.

The text of my note stays within the border's boundaries in my PDF output, but when I build it in HTML5, the text goes outside of the border when it goes beyond a couple lines long.

Here's how it looks in print (Good!):
border_print.png
Here's how it looks in HTML5 (Bad!):
border_web.png
And here's the code:

Code: Select all

	p._BestPractice_PNG
	{
		mc-auto-number-format: '{b}Best Practice:  {/b}';
		font-weight: normal;
		font-family: Calibri;
		font-size: 100%;
		color: #000000;
		padding: 5px;
		padding-right: 15px;
		padding-left: 38px;
		padding-bottom: 15px;
		margin: 10;
		margin-right: 100px;
		background-image: url('../Images/Icons/BestPractice_PNG.png');
		background-repeat: no-repeat;
		background-color: #d3d3d3;
		background-position: 1% 25%;
		border-radius: 8px;
		border-color: #000000;
		border: solid 0px;
		height: 38px;
		min-height: 36px;
	}
Any ideas on how to fix this?
I tried changing min-height and then the height properties to larger pixels, but then it's just a big empty box when there are only a couple lines of text. I need to figure out what property allows the border to adjust to the right size according to the amount of text.
You do not have the required permissions to view the files attached to this post.
Lydia
Sr. Propeller Head
Posts: 373
Joined: Tue Apr 23, 2013 3:19 am
Location: The Netherlands, Amsterdam Area

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Lydia »

I would use the min-height only (if you want to assure a certain minimal height of the box). Leave the height at (default), which is 'not set'. The box should then adapt to your content, if it goes beyond the min-height. At least it does for my quick test.
Using Flare 10.2 and Flare 11 on Win 7
Daniel Lemke
Propeller Head
Posts: 42
Joined: Tue Jan 21, 2014 11:55 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Daniel Lemke »

AudreyLange wrote:...The text of my note stays within the border's boundaries in my PDF output, but when I build it in HTML5, the text goes outside of the border when it goes beyond a couple lines long....Any ideas on how to fix this?
I tried changing min-height and then the height properties to larger pixels, but then it's just a big empty box when there are only a couple lines of text. I need to figure out what property allows the border to adjust to the right size according to the amount of text...
I had a similar problem. I had to use a min-height for the default medium and height for the print medium. Also, it looks crazy in Flare's XML editor, but fine when I do a preview.

I am using UL's, so the code is a little different, but here is what I have going on:

Default medium

Code: Select all

/*
BEGIN NOTE STYLE:
The following entries automate using an icon for notes by using unordered lists with a custom background image. The text is rendered to the right of the background image using left padding, and the entire background image is always displayed by using a min-height. There is a related section under the print medium to manage Flare quirks with single-sourcing PDF output.
*/

ul.note
{

	list-style-type: none;
	padding: 0pt;
	margin: 0pt;
}

ul.note > li
{
	background: url('../../image/note_v2.png')no-repeat 5pt 5pt;
	background-color: #EEEEEE;
	-moz-border-radius: 5px;
	border-radius: 5px;
	min-height: 35pt; /* The image height is 46; this is less than so that the background padding lines up */
					  /* The min-height does not work for PDF output, so for the print medium below, we use height instead */
	padding: 5pt 5pt 5pt 44pt;
	margin: 12pt 2pt 12pt 2pt;

}

ul.note p
{
	margin: 0pt;
	padding 0pt;
}

/* END NOTE STYLE */
Print medium

Code: Select all

	/*
	BEGIN NOTE STYLE:
	See the notes in the note style section under the default medium.
	*/
	ul.note > li
	{
		background: url('../../image/note_v2.png')no-repeat .5in .5in;
		height: 48pt;
		}
	
	/* END NOTE STYLE */
Everything seems to work okay for me except the pdf doesn't respect my top background position, but does the left. Note that the .5 inches in the print medium is much larger than the points in the default medium, but I am still trying to figure out how to position the background image correctly into the note.
Dan Lemke of Thomson Reuters
Image
Daniel Lemke
Propeller Head
Posts: 42
Joined: Tue Jan 21, 2014 11:55 am

Re: Background Image in Style Doesn't Appear in HTML5 Output

Post by Daniel Lemke »

By the way, we use the UL's instead of paragraphs because (1) they are easy to insert in a page and (2) they can legally contains things like tables and lists.
Dan Lemke of Thomson Reuters
Image
Post Reply