Include .html files without "building" them?

SDWriterClmt · Post by **SDWriterClmt** » Wed Sep 26, 2018 3:05 pm

Can Flare be set to include .html files (that I've added to the project) in the output without actually "building" them?

Here is the situation:
I have some Gov't spec .html files that I want to use in my project; link topic text to them and so on. When the original files are opened, say from Explorer, they look great. But once the project is built, Flare has made changes to them. These same files in Output are different and when opened, the formatting is pretty screwed up: background coloring is gone, table text no longer wraps within its cells, etc.

So, as asked above, is there a way to tell flare to include these file in Output without modifying them in the process?

SDWriterClmt · Post by **SDWriterClmt** » Wed Sep 26, 2018 3:52 pm

Posting examples of what I am talking about.

The .html docs should appear like this:

CMS_spec_appearance_before.png

But after the project builds, they appear like this:

CMS_spec_appearance_after.png

ChoccieMuffin · Post by **ChoccieMuffin** » Thu Sep 27, 2018 2:57 am

I haven't done what you're after, but I have a couple of ideas that might take you some way along the road.

If you look at the files in a text editor are the styles used in them included at the top of the file, or is there a reference to a stylesheet in the <head> section? Or does it look just the same as an ordinary Flare "unbuilt" html file - or even a "built" one?

There is also a setting where you can allow or disallow the use of local topic stylesheets, but that would mean you'd have to have the styles used in those HTML files stored as a CSS. On the Project tab of the ribbon click Project Properties and on the Project Properties dialog box in the Defaults tab select the Allow local stylesheets check box. (The Flare help on this is here: http://help.madcapsoftware.com/flare201 ... -Files.htm.)

Another thing you could try is in the target on the Build Events tab. Could you add a script to copy the "nice" HTML files into the output location and see if that does the trick?

Hope these suggestions are enough to get you started and don't lead you down a dead end.

devjoe · Post by **devjoe** » Thu Sep 27, 2018 6:10 am

Choccie is on the right track. This looks very much like the topic has the wrong stylesheet attached or its stylesheet is missing. This could be because the original HTML files are linked to a stylesheet you haven't included in the project, or because settings in your project have forced a different stylesheet to be applied.

Look for stylesheet links in the <head> section of these files in the original source, in the Flare source folder after you have imported them, and in the Flare output. Something like:
<link href="../filename.css" rel="stylesheet" />
Make sure the same stylesheets made it all the way through. In the output, Flare will insert some extra stylesheets from the Skins folder, but the original reference should still be there, after all other stylesheet links (meaning it overrides the others) and this .css file should be found at the relative path indicated from the topic in the output.

SDWriterClmt · Post by **SDWriterClmt** » Thu Sep 27, 2018 9:34 am

Thanks. Yeah I was comparing the two files yesterday. Not through a text editor but through "view source" in the browser. That's why I was thinking, sure would be nice if Flare didn't make a bunch of changes. Maybe the styles are incompatible. That's why I was asking if it's possible to exclude some files from the Project's processing; leave them as-is. I would much rather configure Flare to do this, but I did think of two workarounds:

1. Simplest alternative would be to place these .html spec folders on our web server outside of our online help, and just have the links point to those locations as external files?, or... one other choice Flare offers is HTML help file. What's that about?
2. This would only be a desperate measure -- Built the project, then copy the the originals into Output, replacing the 'built' ones, and then publish. As I said, not a great or long term solution.

So below are the files' head tags. As you can see, Flare made a lot of changes.

ORIGINAL FILE HEAD:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
  <title>Preventive Care and Screening: Tobacco Use: Screening and Cessation Intervention</title>
  <style type="text/css"> 
 body { 
 color: rgb(26, 26, 26); 
 background-color: rgb(255,255,255); 
 font-family: Verdana, Tahoma, sans-serif; 
 font-size: 11px; 
 } 
 a { 
 color: rgb(0, 0, 255); 
 background-color: rgb(255,255,255); 
 } 
 h1 { 
 font-size: 12pt; 
 font-weight: bold; 
 } 
 h2 { 
 font-size: 11pt; 
 font-weight: bold; 
 } 
 h3 { 
 font-size: 10pt; 
 font-weight: bold; 
 } 
 h4 { 
 font-size: 8pt; 
 font-weight: bold; 
 } 
 div { 
 width: 80%; 
 } 
 table { 
 line-height: 10pt; 
 width: 80%; 
 font-size: 11px; 
 } 
 .inner_table { 
 width: 100%; 
 } 
 .inner_table td {
border-color:#ffffff;
border-style:solid;
border-width:1px;
border-top: 0;
border-left: 0;
border-right: 0;
}
.inner_table tbody > tr:last-child > td  {
border-bottom-style:none;
}
.ver { 
 padding: 0px 5px} 
 tr { 
 background-color: rgb(224,224,224); 
 } 
 td { 
 padding: 0.1cm 0.2cm; 
 vertical-align: top; 
 } 
 .h1center { 
 font-size: 12pt; 
 font-weight: bold; 
 text-align: center; 
 width: 80%;} 
 .header_table{ 
 border: 1pt inset rgb(0,0,0);} 
 .narr_table { 
 width: 100%; 
 } 
 .narr_tr { 
 background-color: rgb(225,225,225); 
 } 
 pre { 
 overflow: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */ 
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
 white-space: -pre-wrap; /* Opera 4-6 */ 
 white-space: -o-pre-wrap; /* Opera 7 */ 
 word-wrap: break-word; /* Internet Explorer 5.5+ */ 
 font-family: Verdana, Tahoma, sans-serif; 
 font-size: 11px; 
 text-align:left; 
 margin: 0px 0px 0px 0px; 
 padding:0px 0px 0px 0px; 
 } 
 .narr_th { 
 background-color: rgb(201,201,201); 
 } 
 .td_label{ 
 font-weight: bold; 
 color: white; 
 }</style>
 </head>

AFTER BUILDING:

Code: Select all

<!DOCTYPE html>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" lang="en-us" xml:lang="en-us" data-mc-search-type="Stem" data-mc-help-system-file-name="Default.xml" data-mc-path-to-help-system="../../../" data-mc-target-type="WebHelp2" data-mc-runtime-file-type="Topic" data-mc-preload-images="false" data-mc-in-preview-mode="false" data-mc-toc-path="">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Preventive Care and Screening: Tobacco Use: Screening and Cessation Intervention</title>
        <link href="../../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" />
        <link href="../../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" />
        <link href="../../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" />
        <link href="../../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" />
        <link href="../../Resources/Stylesheets/CT2017.css" rel="stylesheet" />
        <style>body
{
	color: rgb(26, 26, 26);
	background-color: rgb(255,255,255);
	font-family: Verdana, Tahoma, sans-serif;
	font-size: 11px;
}

a
{
	color: rgb(0, 0, 255);
	background-color: rgb(255,255,255);
}

h1
{
	font-size: 12pt;
	font-weight: bold;
}

h2
{
	font-size: 11pt;
	font-weight: bold;
}

h3
{
	font-size: 10pt;
	font-weight: bold;
}

h4
{
	font-size: 8pt;
	font-weight: bold;
}

div
{
	width: 80%;
}

table
{
	line-height: 10pt;
	width: 80%;
	font-size: 11px;
}

.inner_table
{
	width: 100%;
}

.inner_table td
{
	border-color: #ffffff;
	border-style: solid;
	border-width: 1px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

</style>
        <script src="../../../Resources/Scripts/custom.modernizr.js">
        </script>
        <script src="../../../Resources/Scripts/jquery.min.js">
        </script>
        <script src="../../../Resources/Scripts/require.min.js">
        </script>
        <script src="../../../Resources/Scripts/require.config.js">
        </script>
        <script src="../../../Resources/Scripts/foundation.min.js">
        </script>
        <script src="../../../Resources/Scripts/plugins.min.js">
        </script>
        <script src="../../../Resources/Scripts/MadCapAll.js">
        </script>
    </head>

devjoe · Post by **devjoe** » Fri Sep 28, 2018 12:08 pm

OK, so you had an inline style sheet. Flare reformatted it a little, but all looks OK until you get up to the line in the original which looked like:
.inner_table tbody > tr:last-child > td {

This is a valid CSS selector, but it can't appear raw in an HTML file because the > character is meaningful to the HTML, and Flare trashed this line and the rest of the inline style sheet.
Browsers deal with it, but Flare uses a stricter interpretation of HTML called XHTML which makes the source files also valid XML, and that cannot tolerate "quirks" stuff that browsers handle.

There's a mechanism You will see often with inline stylesheets which makes them perfectly valid inside HTML documents, and you should use this to protect your inline style sheet.
Insert two lines of comments at the beginning and end of the stylesheet, as follows:

Code: Select all

<style type="text/css">
	/*<![CDATA[*/
		body
		{
			background: #eee;
		}
	/*]]>*/
</style>

The /* ... */ stuff is a CSS comment; it makes the stuff inside be ignored from the perspective of applying styles.
The <![CDATA[ ... ]]> stuff is a CDATA tag; it is a way of embedding arbitrary literal data inside an HTML or XML file. In particular, it allows raw > characters to appear inside it (as long as they aren't preceded by ]], which would have closed the CDATA tag).
The two of them together let all valid CSS appear raw within the style tag inside the document.

SDWriterClmt · Post by **SDWriterClmt** » Fri Sep 28, 2018 3:49 pm

Awesome. Thank you! That works perfect. I only need to do it to about 12 docs. It'll be a snap.

MadCap Software Forums

Include .html files without "building" them?

Include .html files without "building" them?

Re: Include .html files without "building" them?

Re: Include .html files without "building" them?

Re: Include .html files without "building" them?

Re: Include .html files without "building" them?

Re: Include .html files without "building" them?

Re: Include .html files without "building" them?