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

Vertically Center Text for Reflowable ePUB3

Engaged ,
Mar 21, 2017 Mar 21, 2017

Copy link to clipboard

Copied

Windows 10, 64 bit, InDesign CC 2017

Does anyone have a recommendation on how to vertically center text for a reflowable ePUB? The first page of the eBook I'm working on has the book title and the byline. It looks like this:

Some Book Title

by

Some book author

I'd like for this to sit in the middle of the page. Can I get InDesign to output the CSS for this or do I have to do this manually?


It's only an island if you look at it from the water.
TOPICS
EPUB

Views

6.9K

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 ,
Mar 22, 2017 Mar 22, 2017

Copy link to clipboard

Copied

Does the Paragraph Style, with centered text indicated, not work?

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
Engaged ,
Mar 22, 2017 Mar 22, 2017

Copy link to clipboard

Copied

Hi DC,

No, it will only center the text horizontally, but the text will appear at the very top of the page, whereas I want it to occupy the middle.


It's only an island if you look at it from the water.

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 ,
Mar 22, 2017 Mar 22, 2017

Copy link to clipboard

Copied

Create a Paragraph style just for this and add space above (within the Paragraph style panel)

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
Engaged ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

It doesn't work too well for reflowable ePUBs. They don't translate a lot of techniques, used for a print layout, to html & css. I need mine to consistently center itself vertically, based on the viewport (monitor size).


It's only an island if you look at it from the water.

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 ,
Mar 23, 2017 Mar 23, 2017

Copy link to clipboard

Copied

I've never had problems, I create the document especially for reflowable text ePub - the InDesign document looks nothing like the print version. Which devices have you tested it on?

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
Explorer ,
Mar 28, 2017 Mar 28, 2017

Copy link to clipboard

Copied

Hello Bro,

Look first of all apply paragraph style to the text and give some enters before your text and apply the same paragraph style to them

in every enter insert non breaking space, Then try to export Capture1.JPGCapture2.JPG  

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
Engaged ,
Mar 28, 2017 Mar 28, 2017

Copy link to clipboard

Copied

Guys, I found this CSS code which works really well. It will center the line of type vertically, based on the size of the viewport, which is what I needed. In my example above, I created a paragraph style for the first line of type (book title). Then I went into the Export Tagging tab,unchecked Emit CSS and entered a CSS class name. Finally I created a separate CSS file with the same class name that contains all of the font information, including the code below. Upon exporting, I made sure to include this css file.

margin: 50vh 0 0 0;  /* vh stands for viewport height*/

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

I've proofed it on an iPhone 6s+, iPad and MS Surface Book (using Readium) and it works consistently.


It's only an island if you look at it from the water.

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
New Here ,
Jul 22, 2017 Jul 22, 2017

Copy link to clipboard

Copied

The space + non-breaking space worked. 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
Explorer ,
Jul 26, 2017 Jul 26, 2017

Copy link to clipboard

Copied

you are welcome

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
Explorer ,
Mar 29, 2017 Mar 29, 2017

Copy link to clipboard

Copied

where should I enter this CSS code?

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
Engaged ,
Mar 29, 2017 Mar 29, 2017

Copy link to clipboard

Copied

Mahmoud,

First you'll need the CSS for the paragraph style that will be used to vertically center the line of type. This style cannot be used anywhere else in the InD doc. To do this, don't apply the edits that I mentioned in the earlier post just yet (from March 28). Instead, export to reflowable ePUB and then crack open the file. Navigate to the CSS file. The name should be something like idGeneratedStyles.css. Open this up with a text/html editor and look for this paragraph style name. It will be a class name so it will start with a period mark, for example, my style is title-byline so in the CSS it will appear as .title-byline. Copy all of the declarations listed in this class name to a blank text file. Then enclose these in a new class name. I called mine .vertCenter.

example:

.vertCenter{

  font-family:"Myriad Pro", sans-serif;

  font-size:1.167em;

  font-style:normal;

  font-variant:normal;

  font-weight:normal;

  line-height:1.2;

margin: 50vh 0 0 0;  /* vh stands for viewport height*/

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

  color:#222222;

  orphans:1;

  page-break-after:auto;

  page-break-before:auto;

  text-align:center;

  text-decoration:none;

  text-indent:0;

  text-transform:none;

  widows:1;

}

Take out any references to the margin properties and replace that with what I wrote above (in orange). Save this file with a descriptive name. Mine is called xtra.css. Switch back to InDesign and open the same paragraph style and click Export Tagging. Add the class name, .vertCenter to the Class field (under Export Tagging). Uncheck Emit CSS. Now export to Reflowable ePUB. When the Export Options window opens, click the CSS tab and click Add Style Sheet. Navigate to your xtra.css file (or whatever you named it). Click Ok to complete the export. Proof your ePUB to confirm the CSS is working correctly. I've tested it on iBooks, Readium, and Kobo. The idea is to ensure your type is vertically centered, based on the size or your veiwport (a.k.a screen, monitor, etc). Let me know if it works for you.


It's only an island if you look at it from the water.

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 Beginner ,
Jul 29, 2017 Jul 29, 2017

Copy link to clipboard

Copied

soundman1963 Thank you so much! I have converted 100's of files and have never been able to figure this out. This is just one more feather in my hat to ensure that my clients get the highest quality files possible. This is an especially important feature for children's books, IMO.

While the enter+nonbreaking space is a work-around (and work-arounds are needed at times), I am thankful that you provided the code.

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
New Here ,
Jan 24, 2021 Jan 24, 2021

Copy link to clipboard

Copied

Nice one @Chris Panny, it worked. But how do you then apply such to multiple pages with different paragraph styles. 

My Dedication Page is just two line and I want it in the middle so also my Contents Page.

 

Anticipate your earnest response. 

 

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 ,
Jan 11, 2022 Jan 11, 2022

Copy link to clipboard

Copied

If you aren't fussy about "center of page," it's easier to use CSS to apply a top margin following a page break to place a dedication, half-title, etc. well down from the top margin.

 

It's best not to get too particular about EPUB display, given the huge variation in readers, settings, etc.


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

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
Engaged ,
Mar 11, 2024 Mar 11, 2024

Copy link to clipboard

Copied

Could you explain further.

 

Would you need to create a document with the CSS for that?

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 ,
Mar 11, 2024 Mar 11, 2024

Copy link to clipboard

Copied

LATEST

It's just like bringing a chapter head or other section title down the page: create a style that has a Keep Option of 'break to next page'; then specify top spacing that will move the paragraph down the page the desired amount, at around 144pt per screen inch. You will probably have to experiment with the value, as (as noted) there is no absolute way to position things vertically.

 

Some readers may also need the EPUB document to split on this paragraph to enforce the top spacing.

 

It's best to keep the top spacing conservative, and check it on a "short" display like the Kindle Reader setting of Kindle Previewer (not "Tablet") to make sure all your text both remains centered (as best is possible) and does not break to the next page.


╟ Word & InDesign to Kindle & EPUB: a Guide to Pro Results (Amazon) ╢

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
New Here ,
Jan 11, 2022 Jan 11, 2022

Copy link to clipboard

Copied

Thank you so much for your explanation!!!

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