New code snippet editor - PDF output looks like a table

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.
Post Reply
klees
Jr. Propeller Head
Posts: 9
Joined: Tue Mar 31, 2015 1:57 pm

New code snippet editor - PDF output looks like a table

Post by klees »

I tried the new Code Snippet Editor to put an XML snippet on a page. The HTML5 output looks great, but in the PDF output, the code looks like it is in a one column table. Each line of the code is a row in a table with borders showing. I've experimented with all the CSS styling options (MadCap CodeSnippetBody and MadCap CodeSnippet), but I cannot turn off these borders!

My guess is that something in my existing stylesheet is causing this, but I have no idea what.

Attached a picture of sample PDF output.
FlareCodeSnippetPDF.png
Thanks for any tips!
Karene
You do not have the required permissions to view the files attached to this post.
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: New code snippet editor - PDF output looks like a table

Post by moshe »

The border to the code snippet is controlled by CSS. In the Stylesheet Editor, modify the style MadCap|codeSnippet.

(Note that the CSS stylesheet controlling the code snippet display is not located with the user stylesheets located in Content Explorer > Stylesheets. It is in a different stylesheet MadCapEditorFlare.css located in a Flare program subdirectory. I prefer editing CSS in a text editor, but it is easier to access these internal styles through the Stylesheet Editor.)
codeSnippet.png
You do not have the required permissions to view the files attached to this post.
Moshe Davis
Jerusalem, Israel
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: New code snippet editor - PDF output looks like a table

Post by moshe »

BTW, I am really happy about the new code snippets and the code syntax highlighting. This was a long-overdue development in Flare.
Moshe Davis
Jerusalem, Israel
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: New code snippet editor - PDF output looks like a table

Post by moshe »

I'm sorry Karene, I read your post too quickly. I assumed that you were talking about the border surrounding the entire code snippet.
I do not see any internal borders like in your example, for any type of code sample (I've tested HTML, XML, CSS, JSON, Python, SQL) in Word, PDF, or HTML output.

If there is something in your code itself (XML, CSS?) which is producing a table, shouldn't the cells appear in all of your deliverables, not just PDF?

Here's example of my PDF output (code snippets containing Python and XML):
codeSnippet2.png
You do not have the required permissions to view the files attached to this post.
Moshe Davis
Jerusalem, Israel
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: New code snippet editor - PDF output looks like a table

Post by ChoccieMuffin »

In your regular stylesheet have you defined your <td> to include a border? (Or it might be <tr>, I can't remember off-hand.) In your generated PDF, if you have a ToC, do your ToC entries also have borders?
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
klees
Jr. Propeller Head
Posts: 9
Joined: Tue Mar 31, 2015 1:57 pm

Re: New code snippet editor - PDF output looks like a table

Post by klees »

Yes, it makes no sense that the borders are only showing in the PDF output. The HTML looks fine. We do have borders on our tables in the PDF and I would not want to turn them off for our normal tables, only for the CodeSnippet div.

I also tried other types of code setting besides XML and I still get the borders in the PDF.

I guess I will try to hack my stylesheet to see if that is what is causing the borders.

By the way, I only edit CSS with a text editor.

Thank you for your replies.

Karene
klees
Jr. Propeller Head
Posts: 9
Joined: Tue Mar 31, 2015 1:57 pm

Re: New code snippet editor - PDF output looks like a table

Post by klees »

Update:
As a test I changed the borders in my CSS for tables (in media print) to red and the result is the code snippet in the PDF has red rules, but so do all of my tables in the PDF.
This is the original rules for table cells in my CSS. I changed the color from #cccccc to #ff0000 (red) as an experiment.
td
{
border-right: solid 1px #cccccc;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
background-color: transparent;
color: #000000;
mc-hyphenate: inherit;
}

The HTML output does NOT use a table but puts the code in the <pre> tag which is correct.

I'm surprised you are not seeing table rules in your code snippet. Do you have any styling for tables in your CSS?

This seems like a bug to me. I'm not quite sure how to add special styling to my CSS for code snippets to turn off the rules.

Karene
klees
Jr. Propeller Head
Posts: 9
Joined: Tue Mar 31, 2015 1:57 pm

Re: New code snippet editor - PDF output looks like a table

Post by klees »

Just in case anyone else runs into this issue, I resolved it by adding the following to my stylesheet (manually).
MadCap|codeSnippetBody table td
{
border-right: solid 1px none;
border-top: solid 1px none;
border-bottom: solid 1px none;
padding: 0.0em;
}

MadCap|codeSnippetBody table
{
border: none;
}

Karene
moshe
Propeller Head
Posts: 45
Joined: Tue Apr 05, 2016 10:10 pm
Location: Jerusalem, Israel

Re: New code snippet editor - PDF output looks like a table

Post by moshe »

klees wrote:Update:
As a test I changed the borders in my CSS for tables (in media print) to red and the result is the code snippet in the PDF has red rules, but so do all of my tables in the PDF.
This is the original rules for table cells in my CSS. I changed the color from #cccccc to #ff0000 (red) as an experiment.
td
{
border-right: solid 1px #cccccc;
.....

The HTML output does NOT use a table but puts the code in the <pre> tag which is correct.
I'm surprised you are not seeing table rules in your code snippet. Do you have any styling for tables in your CSS?
This seems like a bug to me. I'm not quite sure how to add special styling to my CSS for code snippets to turn off the rules.
Our print table styles have white borders (#fff) and the background of our print output is also white, so if the code snippet output was enclosed in a table maybe I wouldn't have seen the cell borders.

To test your theory, I changed the borders in our CSS table style sheet to red. The code snippet output still has no visible cell borders, for HTML, PDF and Word output. So I haven't been able to reproduce your results. Maybe there is some other contributing factor which is triggering the output that you are seeing.
Moshe Davis
Jerusalem, Israel
MPlatt
Propeller Head
Posts: 13
Joined: Mon Mar 02, 2015 10:20 am

Re: New code snippet editor - PDF output looks like a table

Post by MPlatt »

I'm thinking about switching over to Flare's code syntax instead of a custom one we created before they introduced it.

We have a similar styling issue created by the <pre> elements.
We created a custom <pre> style for our code snippets - and it looks like you have something similar.

Flare's snippets use <pre> elements for each line of code in the snippet.
You'll likely need to comment that <pre> styling out of your stylesheet to see Flare's default styling.
Post Reply