• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Styles are missing when publishing to ePub in RoboHelp 9

Guest
Sep 22, 2011 Sep 22, 2011

Copy link to clipboard

Copied

Good afternoon,

We are developing content for Android Tablets and have learned the customary format that we used is, well, unusable.

A few posts suggest that ePub is really the only way to go with Android Tablet Help.

http://blogs.adobe.com/techcomm/2010/04/robohelp_script_to_generate_epub_format_content_for_mobile_d...

http://forums.adobe.com/message/3629956

http://blogs.adobe.com/techcomm/tag/mobile

http://blogs.adobe.com/techcomm/2010/12/epub-industry-standard-file-format-for-reflowable-content.ht...

So, I have published using the ePub format, but I have noticed the existing styles are ignored. In another post, it was noted to ensure that the tags are lower case. I edited the css file and made sure the tags are lower case, but this did not make any difference.

Any suggestions for what may be happening here? My best guess is there is an issue with the CSS file.

Best Regards,

Eric Buterbaugh

Here is the style sheet:

/*created with adobe robohelp 9.*/

h1 {

    margin-bottom: 5pt;

    margin-top: 0.5pt;

    color: #ffffff;

    font-weight: bold;

    font-style: normal;

    font-family: arial, sans-serif;

    font-size: 18pt;

    background-color: #3f5f94;

}

li.h1 {

    color: #ffffff;

    font-weight: bold;

    font-style: normal;

    font-family: arial, sans-serif;

    font-size: 18pt;

}

h2 {

    font-weight: bold;

    margin-top: 9.5pt;

    margin-bottom: 0.5pt;

    font-size: 11pt;

    font-family: arial, sans-serif;

}

li.h2 {

    font-weight: bold;

    font-size: 11pt;

    font-family: arial, sans-serif;

}

h3 {

    font-weight: bold;

    margin-top: 9.5pt;

    margin-bottom: 3pt;

    font-family: verdana, sans-serif;

    color: #1e56b5;

    font-size: 8pt;

}

li.h3 {

    font-weight: bold;

    font-family: verdana, sans-serif;

    color: #1e56b5;

    font-size: 8pt;

}

p {

    margin-bottom: 4.5pt;

    font-size: 9pt;

    margin-top: 0pt;

    font-family: arial, sans-serif;

}

li.p {

    font-size: 9pt;

    font-family: arial, sans-serif;

}

a.expandspot {

    color: #008000;

    cursor: hand;

    font-style: italic;

    text-decoration: none;

}

span.expandtext {

    font-style: italic;

    font-weight: normal;

    color: #ff0000;

}

a.dropspot {

    cursor: hand;

    color: #008000;

    font-style: italic;

    text-decoration: none;

}

a.glossterm {

    color: #800000;

    cursor: hand;

    font-style: italic;

    text-decoration: none;

}

span.glosstext {

    font-style: italic;

    font-weight: normal;

    color: #0000ff;

}

p.bullet-hollow-indent {

    list-style: circle;

    margin-left: 18pt;

}

li.p-bulleted-indent {

    list-style: circle;

}

p.bulleted {

    list-style: rh-list;

    x-list-class: rl-p-bulleted;

    x-list-level: 1;

    margin-top: 4.5pt;

    font-weight: bold;

    margin-left: 48px;

    text-indent: -24px;

}

li.p-bulleted {

    list-style: disc;

}

p.note {

    font-style: italic;

    color: #0000ff;

    background-color: #cdc9b1;

    margin-bottom: 9pt;

    border-top-style: solid;

    border-bottom-style: solid;

    border-top-color: #000000;

    border-bottom-color: #000000;

    border-left-style: none;

    border-right-style: none;

    border-top-width: 1px;

    border-bottom-width: 1px;

    margin-top: 9pt;

    text-indent: 0.25in;

    margin-left: 54pt;

    margin-right: 224px;

}

li.p-note {

    font-style: italic;

    font-weight: normal;

    color: #0000ff;

    text-indent: -;

    list-style: url(blue_nav_index.gif);

}

h4 {

    font-size: 9pt;

    margin-top: 9.5pt;

    margin-bottom: 0.5pt;

    font-family: arial, sans-serif;

}

li.h4 {

    font-size: 9pt;

    font-family: arial, sans-serif;

}

p.tip {

    x-next-class: ;

    x-next-type: p;

    font-style: italic;

    font-weight: normal;

    color: #0000ff;

    border-top-style: solid;

    border-bottom-style: solid;

    border-top-color: #000000;

    border-bottom-color: #000000;

    border-top-width: 1px;

    border-bottom-width: 1px;

    background-color: #fefaa7;

    margin-left: 36pt;

    margin-right: 54pt;

    margin-top: 13.5pt;

    margin-bottom: 4.5pt;

}

li.p-tip {

    font-style: italic;

    font-weight: normal;

    color: #0000ff;

}

p.blue {

    font-size: 10pt;

    color: #ffffff;

    x-next-class: ;

    x-next-type: h4;

    margin-top: 9pt;

    font-weight: bold;

    font-style: normal;

    background-color: #87a3ed;

    margin-right: 0pt;

}

li.p-blue {

    font-size: 10pt;

    color: #ffffff;

    font-weight: bold;

    font-style: normal;

}

p.code {

    font-family: "courier new", monospace;

}

li.p-code {

    font-family: "courier new", monospace;

}

p.tasks {

    font-weight: bold;

    font-style: normal;

    margin-right: 0pt;

    font-size: 8pt;

    font-family: verdana, sans-serif;

    color: #1e56b5;

    background-color: #ffffff;

    line-height: normal;

    margin-top: 4.5pt;

    list-style: rh-list;

    x-list-class: rl-p-tasks;

    x-list-level: 1;

    margin-bottom: 4.5pt;

    x-next-class: aftertasks;

    x-next-type: p;

    text-indent: -0.23in;

    margin-left: 0.23in;

}

li.p-tasks {

    font-weight: bold;

    font-style: normal;

    font-size: 8pt;

    font-family: verdana, sans-serif;

    color: #1e56b5;

    list-style: disc;

    line-height: normal;

}

p.aftertasks {

    margin-top: 0pt;

    margin-bottom: 13.5pt;

    text-indent: -0in;

    x-next-class: tasks;

    x-next-type: p;

    margin-left: 18pt;

}

li.p-aftertasks {

}

p.normal-indent {

    margin-left: 18pt;

}

li.p-normal-indent {

}

h4.heading4-indent {

    margin-left: 18pt;

}

li.h4-heading4-indent {

}

li.h1-headingtop {

    font-size: 14pt;

}

rh-list.rl-p-bulleted {

    x-level-count: 1;

    x-lvl-1-format: "<x>";

    x-lvl-1-type: filled-circle;

}

rh-list.rl-p-note {

    x-level-count: 1;

    x-lvl-1-format: "<x> ";

    x-lvl-1-type: "folder open";

}

rh-list.rl-p-tasks {

    x-level-count: 1;

    x-lvl-1-format: "<x> ";

    x-lvl-1-type: filled-circle;

}

p.numbered-list {

    list-style: rh-list;

    x-list-class: rl-p-numbered-list;

    x-list-level: 1;

    margin-left: 18pt;

}

rh-list.rl-p-numbered-list {

    x-level-count: 1;

    x-lvl-1-format: "<x>.";

    x-lvl-1-type: decimal;

}

p.bulleted-dark-indent {

    list-style: rh-list;

    x-list-class: rl-p-bulleted;

    x-list-level: 1;

    margin-top: 4.5pt;

    font-weight: bold;

    text-indent: -24px;

    margin-left: 88px;

}

Views

3.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

Hi,

Which styles are ignored? All styles? A subset of styles? Do any of your topics have inline styling that might prevent the styling from the CSS to be used? Can you post a screenshot of what it looks like and what you expect it to look like?

The style sheet contains some invalid commands that might be a problem. With invalid commands I mean invalid in CSS but used by RoboHelp. I would expect the ePub to ignore the invalid styles. Try to remove the rh-list styles and the x- styling from your CSS.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

Hi William,

Thanks so much for your prompt response. You have asked some excellent questions.

The first screen shot is the print preview window in Robohelp 9.0.0.228. The second image will be the output that we see in Adobe’s Digital Editions ePub reader”.

A second issue here is that the table is a bit of a mess, though I can tangle with that later.

From what I can see, it seems that all styles are missed. As you can see in this example, the Header 1 and Normal styles are being ignored.

AS for your question: “Do any of your topics have inline styling that might prevent the styling from the CSS to be used?” I am not entirely sure what this means.

Later on, you do suggest removing some styles that could be at issue. Is it as simple as re-creating these styles?

Regarding: “The style sheet contains some invalid commands that might be a problem. With invalid commands I mean invalid in CSS but used by RoboHelp. I would expect the ePub to ignore the invalid styles. Try to remove the rh-list styles and the x- styling from your CSS”

I am fairly new to Robohelp, so I am not entirely sure of the procedure to “Try to remove the rh-list styles and the x- styling from your CSS”

” One thing I would like to add, I am using a style sheet that was created in the past by the first tech writer for our company. This was created in an older version of Robohelp – pre Robohelp 8.

Image 1

Image 2

Many thanks for your assistance!

Eric B.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

Did you use the camera icon in the web interface to upload your screenshots? They didn't come through.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

Hi,

With inline styling I mean styling that is added in the topics themselves instead of in your css. This happens when you select a font family, colour, underline, etc. instead of selecting a style. Inline styling takes precedens over styles in your style sheet and may cause a lot of frustration.

With the "remove the rh-list styles" etc, I mean:

rh-list.rl-p-bulleted { <- These styles

    x-level-count: 1;

    x-lvl-1-format: "<x>";

    x-lvl-1-type: filled-circle; <- command that begin with x-, such as this one.

}

The fact that you are using Adobe Digital Editions is most likely the problem here. The heading background displays in both the FF eBook reader plugin and Sigil. ePub is a book format and 'accidentally' uses a form of HTML: XHTML 1.1.

Not all devices will display all the nice and fancy styles you add to your eBook. For instance, coloured text will not have much use on a black and white e-reader such as the Kindle. Those readers may very well ignore some styling. Another common problem may be fonts. The Kindle for example will ignore the font family you set as it will use it's own fonts. From what I can gather, Digital Editions just chooses to ignore some of your styling. Try your eBook on another eBook viewer.

As for your tables, what is going wrong? Do you have complex tables or just simple tables with a few rows and columns? The kindle is notorious for not rendering tables correctly. I've not seen this problem in ePub before.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 23, 2011 Sep 23, 2011

Copy link to clipboard

Copied

Hi William,

You have given me much to consider. I will abandon Adobe’s ePub viewer to see if the behavior improves.

Regarding the RH styles, these were created in Robohelp. If they are a problem, is there a better way to add them to the CSS file?

Thanks,

Eric

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 26, 2011 Sep 26, 2011

Copy link to clipboard

Copied

Hi William,

I have done a little more experimenting.

I converted another Help project to ePub and opened it in the Adobe epub viewer and got the same results, thus validating your ideas that the viewer could be part of the issue.

I then opened this same output using a FireFox epub reader addin, and it retained the styles.

This is encouraging.

I then moved back to my existing project. I was getting some odd errors in the FireFox reader, along with the Aldiko epub reader.

I contacted the support team for the Firefox viewer and they suggested the issue is occurring due to some file path problems.

I extracted the contents of the epub file, using 7 zip. I then ran a path scanner tool and found some really odd file paths, which I suspect is causing the issue.

Here is the path where the project is being stored:

C:\Documentation\ePub

Here is some sample output from the Path scanner, showing the terrible folder structure the ePub publish process is creating:

c:\documentation\test\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\Getting_Started.htm

c:\documentation\test\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\EPubFolder\OPS\Setting_Up_Newforma_Punchlist.htm

Do you have any recommendations for resolving this pathing issue?

Once I can get past this, I can better determine if my CSS is having issues.

Thanks!

Eric Buterbaugh

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

Hi,

Best ignore the style sheet for now, as that doesn't seem to be the problem now. You can use RoboHelp for style sheets without problem. Before I realized it might be a problem with the ePub viewer, I thought that the RoboHelp style sheet might be the problem.

That are some strange path settings. In which files do you see these paths? In your topics, the .opf, the .ncx? Also, what is the error you are recieving in the Firefox viewer?

If the incorrect paths are in your topics, the problem is most likely in your RoboHelp project. If you see these links in the opf or ncx, the problem is with the script. Once you pinpointed the incorrect paths in a specific file, we can move on from there.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

Hi William,

Thanks again for the response.

Here is the error from the Firefox ePbu reader addin:

Sorry, unfortunately an error occured during opening your ePub-book :(. Please help us improving EPUBReader and send the following information to epubread@gmail.com. Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

Pssst - Eric? He's Willam, not William ;>)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

@Jeff: Thanks. I'm so used to it I don't even bother anymore

@Eric: That's not a very helpful error message. Can you please answer my other questions too? Perhaps you can share the ePub with me so I can take a look myself.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

Hi Willam,

My apologies on the typo 🙂

I was responding to your question in the email notification. It seems it may have truncated the message.

I will provide the details that you have asked.

1. The error in the FireFox addin:

Sorry, unfortunately an error occured during opening your ePub-book :(. Please help us improving EPUBReader and send the following information to epubread@gmail.com. Thank you!

------------------ start: Tue, 27 Sep 2011 13:42:43 GMT

store: begin

store: C:\Users\ebuterbaugh\AppData\Roaming\Mozilla\Firefox\Profiles\xn1fi8kn.default\epub\27\27.epub

store: end

zip: begin

[Exception... "Component returned failure code: 0x80520011 (NS_ERROR_FILE_NAME_TOO_LONG) [nsIFile.create]" nsresult: "0x80520011 (NS_ERROR_FILE_NAME_TOO_LONG)" location: "JS frame :: file:///C:/Users/ebuterbaugh/AppData/Roaming/Mozilla/Firefox/Profiles/xn1fi8kn.default/extensions/%7B5384767E-00D9-40E9-B72F-9CC39D655D6F%7D/components/epubreader.js :: :: line 786" data: no]

2. Regarding the question for the long file paths, using 7zip I opened the .epub file that RoboHelp created. I extracted the contents and used the path scanner tool to measure file path names.

Looking at the files inside the OPF folder, there is a folder structure seems to be repeating itself, though I am uncertain why. These are the paths of the files contained in the epub archive. I did check the OPF file and see the long paths there. Can I edit this file? How is this file generated or what is the source? This may help me to resolve this.

I have reviewed the properties of these topics in RoboHelp to ensure the true file path to the .htm file is short. Something is happening in the ePub generation process.

You state: “. If you see these links in the opf or ncx, the problem is with the script. Once you pinpointed the incorrect paths in a specific file, we can move on from there.

This makes sense, that there is something in this project. Can you elaborate what you mean by the problem in the script? This is Robohelp 9, so I have not modified any script files for RoboHelp. Should I do this? If so, please let me know the file name and what to look for.

It would be great if you could take a look at the .epub file. What method can I use to get it to you for your review? I do not see any options here to attach files.

Thanks again!

Eric

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 28, 2011 Sep 28, 2011

Copy link to clipboard

Copied

Hi,

The untruncated message is indeed much better

With 'problem in the script' I mean the following: The ePub script generates an XHTML output and copies the topics and resources from the output to a working folder for the ePub creation. Unless you have this repeating structure in your project, this repeating structure should not occur. The OPF should indeed show these paths if your see the recurring folder structure. That means that the fault probably lies in the copy mechanism that copies your output files into the working folder.

You cannot attach files to the forum. You can mail met at contact [at] wvanweelden [dot] eu.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 03, 2011 Oct 03, 2011

Copy link to clipboard

Copied

Hi Willam,

I wanted to update you on this situation.

First, the good news - I am finally able to generate the epub file without errors and it can be viewed in the FireFox addin, as well as using ebook reader apps on my tablet.

To get to this point, I recreated the project in Robohelp, then recreated the topics. I was able to copy the topic info from the old project and paste in to the new topic on the new project. This wasn't quite as bad as it sounds.

Now, onto the "not so good news"...The CSS formatting is still being entirely ignored in the epub file. I have tried the Adobe Digital Editions on my desktop, Aldiko, FBReader, and Moon+ Reader for my tablet device. All present the epub in a completely different format - i.e., the font is completely different, the Heading styles are missing, some Note styles that we created are missing. It is as if the epub generation process in RH9 completely ignores the CSS.

I will attach a screenshot showing the preview of the topic from RoboHelp 9 - RH-Epub-format-issue.JPG

I'll include a second screenshot showing the topic in the tablet using Aldiko ebook reader

tablet-view-no-formatting.jpg

I hope this info is helpful. Is it possible that epub simply removes any formatting, substituting its own styles?

Thanks,

Eric

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 04, 2011 Oct 04, 2011

Copy link to clipboard

Copied

Hi,

I ran some more tests and did some reading up, and I constantly come across the limitations of the ePub format/readers. From the ePub specification:

The CSS-based style sheet constructs in this specification define required rendering functionality. To minimize the burden on Reading System developers and device manufacturers, not all CSS 2 properties are included. A few additional properties and values have been added to support page layout, headers, and footers. These, taken together, constitute the OPS CSS 2.0 required subset.

An example about using colour in a style sheet:

Current browsers support a host of keyword color names. XHTML 1.1 defines 16 named colors, as well as numeric values. OPS style sheets may use all CSS2 forms, however Reading Systems are not required to distinguish all these colors for rendering (otherwise monochrome devices would necessarily be non-conforming, which is not the intent).

Fonts are supported in the standard (the standard says that font-family and other styling must be supported). As far as I can make out, you may choose between two things:

  1. Use generic font description: serif, sans-serif, monospace.
  2. Use font names, such as Arial. This however would require you to use an open type font which needs to be embedded in the ePub.

See the following section in the specification: http://idpf.org/epub/20/spec/OPS_2.0.1_draft.htm#Section3.4

The answer I can give you goes contains multiple facets:

  1. ePub does not support all the formatting you may be able to throw at it using style sheets. A list of all supported formatting is available in the specification.
  2. ePub readers can perhaps ignore styling even though the ePub format supports it.
  3. Some styling, such as specifying a font, may only work after manually optimizing the CSS through an external CSS editor.

I haven't read the complete specification, so I'm not in the position to tell you what will always work, what will never work, etc. The following page has some screenshots of the same ePub on different readers: http://rufus.deuchler.net/2010/10/css-and-xhtml-tags-for-epub.html That illustrates the problem.

Sorry I can't be more help, but it seems we will have to learn to live with formatting loss in ePub. It's not Robo's fault, but it's annoying none the less.

Greet,

Willam

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Oct 04, 2011 Oct 04, 2011

Copy link to clipboard

Copied

LATEST

Willam,

Thanks so much for your time and effort!

This was indeed very helpful as you have confirmed that the issue at hand may be a limitation to the epub formatting capabilities; and not an error in Robohelp or my style sheets.

Now that we know that, I can try some different things in my publishing to try to get the best output.

We may consider this closed!

Thanks again,

Eric

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Sep 27, 2011 Sep 27, 2011

Copy link to clipboard

Copied

Thanks Jeff!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp