Code samples with numbers not working as expected in HTML5

[Gary Niemen]

We are single sourcing to PDF and HTML5. Most things work fine. One thing that isn't working is code samples where we number the lines of code. See the pics below for the story. Basically, it is working fine in the PDF, but not so in the HTML5. Does anybody know how I can get the HTML5 output to work correctly (that is, the same as in the PDF).

How it looks in Flare:

numbered_code_source.PNG

How it looks in PDF - just fine.

numbered_code_pdf.PNG

How it looks in HTML5 - no indentation and font changed.

numbered_code_html5.PNG

What the source looks like in HTML5.

numbered_code_html5_source.PNG

[Gary Niemen]

Interesting. What we have discovered is that our use of auto-numbering on the code sample was leading to Flare creating a table for the HTML5 output. That's why we lose the indentation and the font. Any comments?

[ChoccieMuffin]

I haven't used it myself, but could you use PRE?

[Gary Niemen]

The original numbered style we used was a pre style.

[ChoccieMuffin]

The original numbered style we used was a pre style.

Of course it was, d'oh!

How about using a p class styled as you require? I have one that I use (in PDF and CHM, so not HTML5) that works for me, though I don't have the numbers at the start. Might be worth taking a look at that approach as an alternative to PRE? Or a div to contain ordinary p?

Here's what I have in my stylesheet (includes both approaches). If you go for the div approach you only need the first two, if you go for the p class approach you only need the second two:

Code: Select all

	div.Code
	{
		margin-bottom: 2%;
		margin-top: 0;
		background: #E8EEF8;
		color: #003399;
		padding-left: 10px;
		padding-top: 3px;
		margin-left: 30px;
		margin-right: 30px;
		padding-bottom: 3px;
		font-family: 'Courier New';
		mc-next-tag: p;
	}

	div.Code p
	{
		margin-bottom: 0;
		margin-top: 0;
		background: #E8EEF8;
		color: #003399;
		margin-left: 0px;
		margin-right: 0px;
		font-family: 'Courier New';
	}

	div.Code > p:last-of-type(1) 
	{
	margin-bottom: 2%;
	padding-bottom: 10px;
	}

	p.CodeExplained
	{
		margin-bottom: 0;
		margin-top: 0;
		background: #E8EEF8;
		color: #003399;
		margin-left: 30pt;
		margin-right: 30pt;
		padding-left: 10px;
		padding-top: 2px;
		font-family: 'Courier New';
	}

	p.CodeLastLine
	{
		margin-bottom: 2%;
		margin-top: 0;
		background: #E8EEF8;
		color: #003399;
		margin-left: 30pt;
		margin-right: 30pt;
		padding: 3px 0 3px 10px;
		padding-bottom: 3px;
		padding-top: 3px;
		font-family: 'Courier New';
		mc-next-tag: p;
	}