Skip to main content
F
fishchief
Participant
February 20, 2023
Answered

INDD to EPUB export: wrapping individual paragraph styles in outer element

  • February 20, 2023
  • 1 reply
  • 1358 views

I'm trying to export an InDesign file to EPUB. Throughout the document there are code blocks which are made up of a bunch of individual lines with the paragraph style "Code". So when I export to EPUB, it shows up in the XHTML like this:

<p class="Code">example line of code</p>
<p class="Code">example line 2 of code</p>
<p class="Code">you get the idea...</p>
But how can I change the structure of the InDesign document so that when I export to EPUB, it "wraps" all the code lines into an outer <pre> and <code> element, and removes the individual paragraph styles from each code line? Basically, I want the XHTML to look like this instead:

<pre>

  <code>

    example line of code
    example line of code 2
    you get the idea...

  </code>

</pre>

I tried editing the XML in the "Structure" panel to do this, but those changes aren't coming through at all when I export to EPUB.

 

Is it possible to do this in InDesign? If not, how do people generally go about adding outer block elements to EPUBs exported from InDesign? Is it something that you have to do manually in an XHTML editor like Sigil?

 

Thanks so much for any guidance!

 

This topic has been closed for replies.
Correct answer James Gifford—NitroPress

I think I see what you're saying. What's confusing me still is that I'm in Sigil looking at the XHTML of an EPUB (from a book about programming) made by a professional publisher. The structure of the code blocks in these XHTML files looks like:

<code>

<p class="codefirst">code line here...</p>

<p class="code">code line here...</p>

<p class="codelast">code line here...</p>

</code>

So did the <code> wrapper not come from INDD, but from the publisher editing the XHTML files after conversion? I know that the publisher used INDD to create the EPUB because it says so in the colophon.


EPUB is not a fixed format any more than web pages are — there are many approaches to each solution. Some are obsolete nonsense promoted by blog-level "experts" who haven't changed their methods in over a decade. Others are used by high-volume publishers who have all kinds of automated conversion processes that suit their needs. (If they're coding publishers, it's in no way surprising that they take a code approach to formatting... and probably use all kinds of proprietary filters and apps to generate it.)

 

But in this case, you are very much diving down the rabbit hole trying to examine the structural code of another publisher's book. You might as well go examine the lead-type sheets for a letterpress book

 

If you want to tackle the conversion from the code up, using coding tools and the "build a bear" process emphasized by tools like Sigil (and much of the publishing-blog-guru crowd), by all means go ahead. You won't be alone, but it will take about three days for some anointed one to tell you how terrible a tool InDesign is for EPUB, shame on you. 🙂

 

But if you just want to get your book from ID to EPUB, with clean, elegant styling for both the body and all code examples, you don't need to do anything more than have a clean InDesign document and export to EPUB using CSS style remapping. With absolutely no post-export mucking around. Trust me. 🙂

 

1 reply

James Gifford—NitroPress
James Gifford—NitroPress
Legend
February 20, 2023

Use a CSS definition to modify your "Code" style. You may find (as I almost always have) that you will need three styles: a "Code First," "Code Middle" and "Code End" set so that you can adjust the spacing in the CSS definition.

 

Include the CSS file at export time and the adapted style will be used.

 

You will probably want to spec the font family as "monospace" as well for all these styles, and possibly adjust the font size (and color) relative to the body text.

 

You should never have to edit an exported EPUB. There are differences of opinion — here, and very much elsewhere — but I regard that as an unnecessary old-school approach. You can do everything necessary by adjusting your CSS overrides for a one-shot export.

 

F
fishchiefAuthor
Participant
February 20, 2023

Thanks for the reply. I still am confused more generally about how to achieve a nested structure in EPUB export. When I look at the XHTML files in professionally-created EPUBs, I see various semantic HTML tags like <section>, <aside>, <chapter>, <code>, etc. For example, three paragraph elements for ChapterNumber, ChapterTitle, and ChapterAuthor might all be nested in a <header> tag. In one eBook I'm looking at from a publisher, they wrap all code blocks within <pre> and <code> tags, and I'm trying to model after that. How might this have been achieved?

James Gifford—NitroPress
James Gifford—NitroPress
Legend
February 20, 2023

I think you're confusing the way code is displayed in, say, a text editor like Notepad++, and how it's displayed in a more sophisticated publication.

 

Maybe I'm not understanding your needs, but if you have a block of code in your ID document, it should export just like that to EPUB, allowing for how the export modifies the formatting. If the default formatting isn't doing what you want (and there are many reasons that happens, starting with that no tabs are exported to EPUB), then the above CSS approach is how you restyle the styles, following HTML/CSS practice.

 

If you're looking for some kind of conversion of the content, going from lines styled as "Code" in your ID document to something like a full structural HTML code layout with added PRE and CODE markers... it can't be done. You're not actually exporting to HTML or XHTML as you might in a coding environment, but going from one structured document format to another.

 

Put another way, it's a bit of a mistake to look at the technical coding of a book as a model for how to do things. If you want your code snippets to look like code snippets, just style them that way... and ignore the technical framework underneath. EPUB doesn't really work that way.

 

The book noted below is filled with HTML and CSS code... handled exactly as I just described, with ID styles remapped to CSS styles for the Kindle edition. For example...

 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices