How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

gevin · Post by **gevin** » Thu Jul 28, 2016 10:21 am

Greeting.

I can I insert or include javascript and custom CSS into ePub using Oxygen XML Editor? For interactive ePUb3 purpose, I need javascript and CSS in the
outputted epub file.

Thank you.

Post by **radu_pisoi** » Thu Jul 28, 2016 3:19 pm

Hi,

Could you give us more details about your use case?

Are you using DITA or Docbook files to obtain the EPUB file, so do you want to customize the transformation which produce the EPUB file?

Or, do you have an EPUB file and you want to edit it to add your custom CSS and JS files?

gevin · Post by **gevin** » Mon Aug 01, 2016 6:09 am

Dear radu_pisoi,

Thank you for helping me to solve my problem.

Basically we have been using a Windows base application Jutoh to create our epub3 book, which has fairy amount of cutomized JS and CSS to transform the book with interactive feature, namely formative quiz, tool-tip, accordian navigation, tab navigation, scrollable content within <div> tag and more...

Corrently we are exploring using DITA XML or OxygenXML to produce these epub book as the number of book title getting more, plus improving productivity. We are using Bookmap as the foundation.

What we try to achieve is to insert these three line of scripts within <head> tag into every html file within epub archive file,

<head>
...
<script type="text/javascript" src="interactive.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="interactive_styles.css" />
...<head>
<body>
...

Sorry for my bad English, hope you can understand my issue.

Thank you very much for your time.

Post by **Radu** » Tue Aug 02, 2016 9:21 am

Hi,

Sorry for the delay. So you are generating an EPUB from DITA using Oxygen, right?
Oxygen comes pre-installed with the open source DITA For Publishers plugins. These are the plugins responsible for generating the EPUB.
Unfortunately right now you only have a parameter which can be used to contribute a single CSS to the EPUB:

http://www.dita4publishers.org/d4p-user ... m-css.html

but you can probably make some XSLT changes to provide additional links to CSSs.
For example this XSLT stylesheet:
OXYGEN_INSTALL_DIR\frameworks\dita\DITA-OT2.x\plugins\org.dita4publishers.epub\xsl\epubHtmlOverrides.xsl

has an XSLT template called generateCssLinks which generates the links to all CSSs. So you could try to change that template.
You probably also need to modify the DITA to EPUB build files in order to make sure that the additional CSSs and javascripts are copied to the EPUB archive.

Ideally you should register on the Yahoo Groups DITA Users List and ask DITA to EPUB questions there. Eliot Kimber created these plugins and he is registered on the list. He also is a very experienced consultant so you can hire him to do EPUB customization work.

Regards,
Radu

gevin · Post by **gevin** » Tue Aug 16, 2016 10:24 am

Hi Radu,

Thank you very much for these information and tips.

Sorry for late reply as I try to follow your suggestion to make some change on the XSLT but fail to produce anything. So i have start a conversation on Yahoo Groups DITA Users List about this issue and Eliot Kimber has response to it. Hope to hear some good news from hin soon.

Another question, Oxygen comes with pre-installed DITA For Publishers plugins and I noticed that D4P team have done some update to their plugins. If I would like to use this updated version of the plugins in Oxygen, may I know what are the steps to update the plugins? I noted that D4P plugins are store in frameworks/dita/DITA-OT/plugins/net.sourceforge.dita4publishers.epub, whereas current D4P epub plugins are in org.dita4 publishers.epub.

Should I remove all the old sourceforge.ditaforpublishers directories/files and replace with org.ditaforpublishers version plugins? Or just copy new org.ditaforpublishers plugins into frameworks/dita/DITA-OT/plugins/ will make the new update work?

Thank you.

Best regards,
Gevin

Post by **Radu** » Tue Aug 16, 2016 4:45 pm

Hi Gevin,

Recent Oxygen versions (Oxygen 17.1 or newer come bundled with both DITA OT 1.8 and 2.x in the frameworks/dita/ folder and you can configure the default used DITA OT in the Oxygen Preferences->DITA page.
I would advice you to have an external DITA OT installation set up outside of Oxygen and instruct Oxygen to use it as the default DITA OT installation in the DITA preferences.
And you should probably remove the old plugins, copy the new plugins and run the integrator on that DITA OT before publishing.
Oxygen 18.1 will come with the new "org.ditaforpublishers" plugins pre-installed in its bundled DITA OT 2.x distribution.

Regards,
Radu

How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

Re: How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

Re: How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

Re: How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

Re: How to insert Javascript and Custom CSS into ePub using Oxygen Editor?

Re: How to insert Javascript and Custom CSS into ePub using Oxygen Editor?