Best practice for creating the lines above add below the text for export to epub

Contributor ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

I need to create these lines above and below a chapter title in ID. I can create a simple underline UNDERNEATH the text but what about above it? Once done corrdctly I have to export the doc as an epub and want to make sure there is good spacing.

 

Chapt1SShot.jpg

TOPICS
How to

Views

97

Likes

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

correct answers 1 Correct answer

Community Expert , Sep 19, 2022 Sep 19, 2022

Ha.

 

Add the parameter "width: min-content;" to the CSS definition. This does not work in Kindle (my usual end point) but does work in my two primary test EPUB readers.

 

(EPUB is secondary for me, so if it doesn't work in Kindle, I tend to forget about it.)

 

And if you want some slight extension of the lines beyond the text, add small amounts of left and right padding.

 

Likes

Translate

Translate
Community Expert ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Some Possibilities in Paragraph Styles:

  • Paragraph Frame
  • Rulers abover and below

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Assuming that's a single paragraph, use the rule above and the rule below in the paragraph style definition.

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Unfortunately, no. ID does not export Rule Above and Rule Below to EPUB. The settings are discarded.

 

The only way to do a rule above and/or below is with Paragraph Border, and the only parameters that will be exported are line type and width. Line types are limited to those available in HTML/CSS, so it's best to stay with the simple types if you use anything but solid.

 

Since ID does not export padding, at all, in any style or setting, the spacing of the lines above and below the text (and to the sides, if used) will be a default amount that cannot be adjusted from within ID. In other words, you pretty much take what ID chooses to give and that's that.

 

All of this can be tweaked — extensively — with CSS adjustment of the style. Anything that can be achieved on a web page or other HTML document can be achieved by adjusting the "border" values for the style at the CSS level.

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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
Contributor ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Added rules looks great but does NOT export to epub. I had an underline BEFORE adding the rules. I removed underline and added the two rules but it does not export to epub Reflowable

?????

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Paragraph Rules do not export, as I said.

 

Paragraph Borders do, with limitations.

 

Underlines do export, again with some limitations.

 

This is a good and simple place to learn basic CSS enhancement of EPUB exports, and that will allow you to get almost any export effect you like.

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

I forgot about that. And yes, I agree completely about learning CSS. There's just about nothing you can tweak with it.

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

It's one of the few fairly basic formatting options that simply does not work on EPUB export. Most work, to some degree; the complete lack of export for Rules and limited export for Borders is... perpetually misleading.

 

But to make this thread useful, here's the basic fix:

  • Create a file (with Notepad or similar, not Word) named HeadFix.css or anything convenient.
  • Put the content below in it.
  • Save the file in the document folder.
  • Under HTML/CSS in the export menu, include this file as "Additional CSS."
  • Export. The styling in the CSS file will be applied to the EPUB export.

 

The basic code is:

 

p.STYLENAME {
border-top: solid 2px black;
border-bottom: solid 2px black;
padding-top: 10px;
padding-bottom: 10px;
}

 

 

Change STYLENAME to match the style you're attempting to adjust. Retain the p. prefix. It must match spelling and capitalization EXACTLY, and replace any spaces with hyphens. (If the name isn't exact, following those rules, it will do nothing.)

 

Change the line types, widths, and padding offsets in the code, and save, to adjust the result.

 

Repeat until happy. 🙂

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Curious...why define it as a p with a class when you could use h1 since it's a chapter heading only?

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Because everything is defined as p. by default unless you reassign it in the export menu. I doubt that's been done here. (It is a good idea, to impose HTML structure on the export, for accessiblity and other reasons. But keeping it simple here.)

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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
Contributor ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

OK now using paragraph borders, exported in Epub but border lines go across entire page. I do not see any adjustment in the css in the epub.

 

??

Likes

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
Contributor ,
Sep 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Here is the css for that style as it is

p.Main-Title-Border {
border-color:#5780ca;
border-style:solid;
border-width:1px 0px 1px 0px;
color:#00aeef;
font-family:"Minion Pro", serif;
font-size:2.25em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:center;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;
}
 
If I ADD the rules you posted the width of the line does not change
 
p.STYLENAME {
border-top: solid 2px black;
border-bottom: solid 2px black;
padding-top: 10px;
padding-bottom: 10px;
}

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

Yes, width control is another issue. It doesn't always have good solutions, as HTML/CSS doesn't have any integral "text width" elements.

 

I can't bring to mind how I've solved this in the past. Give me a bit.

 

Also, it looks like you're on top of the CSS, but you are changing the style name, there? It should be p.Main-Title-Border in the added file, just as it is in the original. You can also break out the border elements if you want to keep your defined color, etc.

 

More in a bit.

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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 19, 2022 Sep 19, 2022

Copy link to clipboard

Copied

LATEST

Ha.

 

Add the parameter "width: min-content;" to the CSS definition. This does not work in Kindle (my usual end point) but does work in my two primary test EPUB readers.

 

(EPUB is secondary for me, so if it doesn't work in Kindle, I tend to forget about it.)

 

And if you want some slight extension of the lines beyond the text, add small amounts of left and right padding.

 

|| Word & InDesign to Kindle (& EPUB): a Professional Guide (Amazon)

Likes

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