9 Replies Latest reply on Mar 29, 2017 6:17 PM by soundman1963

    Vertically Center Text for Reflowable ePUB3

    soundman1963 Level 1

      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?

        • 1. Re: Vertically Center Text for Reflowable ePUB3
          Derek Cross Level 6

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

          • 2. Re: Vertically Center Text for Reflowable ePUB3
            soundman1963 Level 1

            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.

            • 3. Re: Vertically Center Text for Reflowable ePUB3
              Derek Cross Level 6

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

              • 4. Re: Vertically Center Text for Reflowable ePUB3
                soundman1963 Level 1

                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).

                • 5. Re: Vertically Center Text for Reflowable ePUB3
                  Derek Cross Level 6

                  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?

                  • 6. Re: Vertically Center Text for Reflowable ePUB3
                    Mahmoud Kenawy Level 1

                    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  

                    • 7. Re: Vertically Center Text for Reflowable ePUB3
                      soundman1963 Level 1

                      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.

                      • 8. Re: Vertically Center Text for Reflowable ePUB3
                        Mahmoud Kenawy Level 1

                        where should I enter this CSS code?

                        • 9. Re: Vertically Center Text for Reflowable ePUB3
                          soundman1963 Level 1

                          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.