Reference to Open Sans in Master Page removed in HTML5 outpu

chuck_agari · Post by **chuck_agari** » Tue Jul 31, 2018 4:58 pm

Based in part on some of the responses I've received here, I thought I try going the Master Page route. Currently, I'm using Open Sans as my base font. I am using a custom CSS file, and as the first line I had

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

As it turns out, if you edit a stylesheet in Flare, it adds an unneeded comment at the top of the file, breaking the CSS because @import lines must be at the top of CSS files (bug filed with MadCap).

So what I thought I'd do instead is apply a Master Page to the HTML5 target and then comment out the @import line in the CSS. And using the link generated, the top of my Master Page looks like this:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

<link href="../Stylesheets/agari.css" rel="stylesheet" type="text/css" />
</head>

(I wanted to comment out the stuff that was there and I'm not using currently in case I want to bring it back.)

When I generate the HTML5 output, I can see clearly that the Open Sans font is not being used because the headings are not using it. Looking at the source of a topic in the output, I see:

<!DOCTYPE html>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" lang="en-us" xml:lang="en-us" class="_Skins_HTML5___Side_Navigation" data-mc-search-type="Stem" data-mc-help-system-file-name="Default.xml" data-mc-path-to-help-system="../../" data-mc-has-content-body="True" data-mc-target-type="WebHelp2" data-mc-runtime-file-type="Topic;Default" data-mc-preload-images="false" data-mc-in-preview-mode="false" data-mc-toc-path="[%=System.LinkedTitle%]|[%=System.LinkedTitle%]">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Publish the DMARC Record in DNS</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="../../Skins/Default/Stylesheets/Components/Tablet.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Mobile.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/foundation.6.2.3.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Styles.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Tablet.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Mobile.css" rel="stylesheet" />
<link href="../Resources/Stylesheets/agari.css" rel="stylesheet" />
<style>/*<meta />*/

.button.previous-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-previous.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}

.button.next-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-next.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}

.needs-pie
{
behavior: url('../../Resources/Scripts/PIE-no-motw.htc');
}

</style>

The link to Open Sans is gone.

What's going on here?

I thought also that Flare might being persnickety. I noticed that type="text/css" was not part of the reference to Open Sans. I added it. It didn't make a difference.

Post by **NorthEast** » Wed Aug 01, 2018 12:09 am

chuck_agari wrote:As it turns out, if you edit a stylesheet in Flare, it adds an unneeded comment at the top of the file, breaking the CSS because @import lines must be at the top of CSS files (bug filed with MadCap).

Are you sure about that? The import lines do need to come before styles, but I don't think they have to be the first line. I have comments before the @import lines, and they work fine - the meta line is inserted by Flare:

Code: Select all

/*<meta />*/
/* comment line */
@import url('...');

chuck_agari wrote:So what I thought I'd do instead is apply a Master Page to the HTML5 target...
The link to Open Sans is gone.
What's going on here?

If the link isn't being included in the output, then I guess that you've set a Master Stylesheet for the target, but have not ticked the Allow local stylesheets setting - you need to tick this.

chuck_agari · Post by **chuck_agari** » Wed Aug 01, 2018 11:29 am

Dave Lee wrote:
chuck_agari wrote:As it turns out, if you edit a stylesheet in Flare, it adds an unneeded comment at the top of the file, breaking the CSS because @import lines must be at the top of CSS files (bug filed with MadCap).
Are you sure about that? The import lines do need to come before styles, but I don't think they have to be the first line. I have comments before the @import lines, and they work fine - the meta line is inserted by Flare:
Code: Select all
/*<meta />*/
/* comment line */
@import url('...');

When I lwas taking some of my HTML/CSS development classes in the past, I recalled being told that an @import statement had to be at the top of a CSS file. W3Schools states this implicitly ("The @import rule must be at the top of the document (but after any @charset declaration)."). But the W3C specification (https://www.w3.org/TR/css-cascade-3/#at-import) states only that it must precede all other style rules. So (a) the documentation on this is inconsistent (surprise!), and (b) a comment shouldn't affect its operation.

Dave Lee wrote:
chuck_agari wrote:So what I thought I'd do instead is apply a Master Page to the HTML5 target...
The link to Open Sans is gone.
What's going on here?
If the link isn't being included in the output, then I guess that you've set a Master Stylesheet for the target, but have not ticked the Allow local stylesheets setting - you need to tick this.

I'll try this, but it doens't feel like it makes sense, for two reasons. First, it can by no means be considered "local" when it's a link to a resource that's completely external. Second, the connotation--and the mental model--of a "local" stylesheet feels like it's one that's referenced in a specific topic file (and desgned to override the global stylesheet).

IIRC correctly (I'd have to double check, but when I clear the "Allow local stylesheets" setting on the project level and open up a topic's properties, I'm not able to assign a stylesheet there (it's grayed out).

Psider · Post by **Psider** » Wed Aug 01, 2018 4:53 pm

I can't remember the details, but W3schools sometimes gets things completely wrong (It was regularly panned on a couple of dev sites a few years ago. And despite the name, I don't think it's affiliated with the W3C). So if I want to try stuff, I visit w3schools, but if I want The Word(tm) I visit w3.org or MDN.

chuck_agari · Post by **chuck_agari** » Wed Aug 01, 2018 5:34 pm

Psider wrote:I can't remember the details, but W3schools sometimes gets things completely wrong (It was regularly panned on a couple of dev sites a few years ago. And despite the name, I don't think it's affiliated with the W3C). So if I want to try stuff, I visit w3schools, but if I want The Word(tm) I visit w3.org or MDN.

Indeed. W3schools is why https://www.w3fools.com/ was invented. I use MDN as well, but w3.org is a lot tougher to find answers because it's written in enginerring-ese.

Psider · Post by **Psider** » Wed Aug 01, 2018 6:16 pm

chuck_agari wrote:w3.org is a lot tougher to find answers because it's written in enginerring-ese.

Yeah, I spent a significant amount of time about HTML4.0 learning how to read the dtd so I could figure out what was going on.

Post by **NorthEast** » Thu Aug 02, 2018 12:03 am

chuck_agari wrote:I'll try this, but it doens't feel like it makes sense, for two reasons. First, it can by no means be considered "local" when it's a link to a resource that's completely external. Second, the connotation--and the mental model--of a "local" stylesheet feels like it's one that's referenced in a specific topic file (and desgned to override the global stylesheet).

Well, whether or not the word "local" makes sense for this option, it works like this:
- If you set a master stylesheet and don't select "Allow local stylesheets", then only the link to your master stylesheet is included in the output (for all topics), and all stylesheet links in topics and master pages are ignored (removed) in the output.
- If you set a master stylesheet and do select "Allow local stylesheets", then your output includes a link to your master stylesheet (for all topics), and all stylesheet links in topics and master pages are included in the output.

Help: https://help.madcapsoftware.com/flare20 ... esheets%22

chuck_agari · Post by **chuck_agari** » Thu Aug 02, 2018 10:11 am

Dave Lee wrote:
chuck_agari wrote:I'll try this, but it doens't feel like it makes sense, for two reasons. First, it can by no means be considered "local" when it's a link to a resource that's completely external. Second, the connotation--and the mental model--of a "local" stylesheet feels like it's one that's referenced in a specific topic file (and desgned to override the global stylesheet).
Well, whether or not the word "local" makes sense for this option, it works like this:
- If you set a master stylesheet and don't select "Allow local stylesheets", then only the link to your master stylesheet is included in the output (for all topics), and all stylesheet links in topics and master pages are ignored (removed) in the output.
- If you set a master stylesheet and do select "Allow local stylesheets", then your output includes a link to your master stylesheet (for all topics), and all stylesheet links in topics and master pages are included in the output.

Help: https://help.madcapsoftware.com/flare20 ... esheets%22

As I want only one stylesheet (including for table styles), I think it makes sense to define it at the project level then. In which case, in theory, I don't need to define it in my Master Page, nor should I link to it in any topic.

That also means that I should be able to put this line at the top of my CSS file:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

In theory, this should be the simplest, most basic configuration.

So I'm moving to that configuration.

And in doing so, I found a slightly different issue: references to variants in the CSS don't work. IOW, I can't use font-family: "Open Sans Semibold"; making it just font-family: "Open Sans"; seems to have fixed the last little niggling issue I was having. Woo hoo! Thanks for the guidance.

MadCap Software Forums

Reference to Open Sans in Master Page removed in HTML5 outpu

Reference to Open Sans in Master Page removed in HTML5 outpu

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o

Re: Reference to Open Sans in Master Page removed in HTML5 o