FrameMaker: Listed Numbers Serif Font, Text is Sans Serif?

New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

Does anyone know why, after HTML5 output, my listed numbers are serif but all my text is sans serif? Thanks.

Views

396

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

Probably because your CSS is either telling it to look that way (or it's NOT telling it to look as a sans-serif & the default is serif).

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

Thanks. My CSS is telling it to be sans-serif, though. This is what's there:

p.FM_bulleted_numbers {
               
                color:#000000;
                font-family:"Neue Helvetica W02" ,"Helvetica Neue" ,Helvetica,Arial,sans-serif;
}

p.FM_bulleted_numbers 2 {
               
                color:#000000;
                font-family:"Neue Helvetica W02" ,"Helvetica Neue" ,Helvetica,Arial,sans-serif;

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

Are there other CSS files present in your output? Maybe they are being referenced in addition to yours? I'd check the HTML source to see what's being used. There used to be a bug in the RoboHelp engine (starting around RH11) that drives the FM HTML generation and gave each page 2 CSS file references - and whatever was the last one mentioned set the rule for how it appeared.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

I'm not sure how to check if there are other CSS files being referenced. The output preview shows my numbers (and numbers 2)output preview to be sans-serif, but they remain serif in the actual output.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

Find a page with the numbered list misbehaving - use your browser's "view source" or "developer tools" to have a look at the code at the point where it's wrong - scan the html for the page to see references to the CSS file(s) in use - usually they are at the top of the page.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

Thanks for your help. I see the body font-family is crossed out for some reason. Could this be what's causing the issue? Everything else is behaving the way I want it too, though, the only serif problem is with the numbers.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

When I select the specific element I get:

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

Looks like you have several CSS files working in there - layout.css, styles.css, and add-voice.css

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

I believe my .book file references a single .css override file (and then it creates a .css file for each of the .fm files in the book (in this case add-voices.css)), but they do all reference the same override .css file (as I am only outputting at the .book level). I'm not sure where layout.css or styles.css are coming from.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

I realized when I "inspect element" and go to highlight the specific element in question (the number) with my cursor, I can only click on the sentence following the number in order to produce the custom code strings in the .css file. When I hover over or click on the number itself, I only get margin information, which makes me think maybe its not referencing the custom code string for the numbers but only the text following it? This is what I see if I click on a number:

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

Why don't you fire it up in Notepad and have a look at how & what's being referenced on those lines that are messing up?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 05, 2018

Copy link to clipboard

Copied

Okay I did. This is how it looks:

<li style="list-style: decimal;">

   <p dir="ltr" class="FM_Numbered_2">Tap <span class="FM_Strong">Advanced Audio</span>&#160;&gt; <span class="FM_Strong">Stereo/Mono</span>, then choose an option.</p>

</li>

If I'm reading this correctly, it's telling "Tap […]" to be FM_Numbered_2, but not the actual number that comes before it (1.). I guess my question is: how do I either a. attribute a style to the number as well, or b. get the style directly before or after to include the number as well?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 05, 2018

Copy link to clipboard

Copied

That's probably it - I'm not too familiar with that font - does it work for "web-safe" fonts?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Engaged ,
Dec 05, 2018

Copy link to clipboard

Copied

Can you say which version of FrameMaker you are using?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Engaged ,
Dec 05, 2018

Copy link to clipboard

Copied

I think that the answer is

Change the setting for auto-number to convert to text, as shown below.

number.png

If this does not work then, iscrepancies in the HTML 5 file always tell me that the FrameMaker source is not really set up correctly.

I suggest going back to the Frame file and verifying that this style is set up correctly there.

Sometimes something looks OK in Frame, but is not really set up correctly.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

IIRC, if you change to "Convert to Text" then your style sheet doesn't apply because the resulting HTML doesn't think it's a list.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Engaged ,
Dec 06, 2018

Copy link to clipboard

Copied

Well it work correctly for all my help files. So maybe for simple files this is OK?

I am working from FrameMaker directly to the HTML 5 help, using the Frame settings pages without editing the Style sheets. Without any additional changes or editing to the file once i am done. So I do not need to add more items to the list in the html, just use whatever was in the FrameMaker file.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

But if your Marketing people suddenly decide to adopt a completely new font or styling of your help, you can just edit the CSS to be used instead of having to go back & completely overhaul your FM content (only speaking from experience there, lol)

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

Careful when using the Convert to Text option. Your font will be fixed, but your hanging indents will no longer work.

-Matt

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Engaged ,
Dec 06, 2018

Copy link to clipboard

Copied

Hi

So what you are saying is that with numbering in html export.

If I try to use the settings dialog box only, without editing the CSS, or using a CSS.

either we get the wrong font for the numbers and it looks bad

or the hanging indents do not appear correctly.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

No, that's not what I'm saying, because it's (effectively) impossible to avoid using a CSS, and using the settings in the Publish pod modifies the CSS.

I'm saying I don't use the Convert to Text option for autonumbers because it removes my hanging indent. That makes my output less controllable, and adds a good deal of inline formatting to the HTML.

When I want to control the font used in my project, I modify the CSS. Usually I do this with the mapping within FrameMaker, and when I want to do things that the UI doesn't let me do, I edit the CSS manually.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 06, 2018

Copy link to clipboard

Copied

Also, somewhat off topic but since we're already there, about hanging indents in HTML5:

How do I adjust my hanging indents after bullets if the text creates a new line (for HTML5 output)? I'd prefer there not to be any. There are no hanging indents in my FM file but after outputting to HTML5:

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 06, 2018

Copy link to clipboard

Copied

You want "power" to line up under "Protect" right? IIRC, that's all controlled by the CSS.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
charless80395138 AUTHOR LATEST
New Here ,
Dec 06, 2018

Copy link to clipboard

Copied

Thanks, that's what I figured. Wasn't sure if anyone knew of an exact line of code for that sort of thing. I'm a tech writer but not a coder myself.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more