Bottom of Page

FDPuthuff · 10-17-2020, 12:04 PM

If I am dealing with some front matter and I wish to 'bottom-justify' a few lines of text, is there html, which will do that, or do I add blank lines until I think I may possibly, maybe be at the bottom of the page?
.
.
.
.

Like this stuff here
Assume it's at the bottom of a page
.
And this

Here

DiapDealer · 10-17-2020, 12:22 PM

This is more EPUB-centric than it is Sigil-centric. This could get moved to the EPUB forum.

Quoth · 10-17-2020, 02:50 PM

Never add blank lines, on paper or ebooks or web pages. Use vertical margins as part of a paragraph style on wordprocessor which becomes CSS later.

On ebooks you can't know where the bottom of a page is. You can only ever force a fresh page break, typically done at certain headings.

There are also Widows and Orphans. They control if a paragraph is split and how much of it can be the widow or orphan across a page break. But you don't know in advance which paragraphs the settings will be applied to. Some people like it at 1 (which means none, there is no 0 setting) other people prefer that less than few lines will cause the entire paragraph to move to the next page.

Quoth · 10-17-2020, 02:53 PM

Short answer is that what you want is like a footer. So NO.
Possible on paper and a web page (but really really annoying on a web page) but not possible on an ebook. No Headers or Footers except by the GUI on an ebook.

KevinH · 10-17-2020, 03:08 PM

You could use svg to create a "cover" like page and scale it to the screen height "100vh". An svg image can be made of text as well as images.

JSWolf · 10-17-2020, 03:12 PM

Ordo it like is done with most title pages. create the frontmatter it as a hi-res graphic and display is full screen. It will display where you want.

DiapDealer · 10-17-2020, 04:09 PM

I'm pretty sure a footer is possible with HTML5 in an EPUB3, but it wouldn't be supported by a lot of readers/apps out there.

RbnJrg · 10-17-2020, 06:29 PM

Quote:

Originally Posted by FDPuthuff

If I am dealing with some front matter and I wish to 'bottom-justify' a few lines of text, is there html, which will do that, or do I add blank lines until I think I may possibly, maybe be at the bottom of the page?
.
.
.
.

Like this stuff here
Assume it's at the bottom of a page
.
And this

Here

It's possible to do what you want. You need to employ a table with three rows, one for the header, one for the body and one for the footer. Of course, only can be used for one page (i.e. a title page).

The following css properties works perfectly under ADE:

Code:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

div.container {
   height: 95%;
   width: 100%;
}

.full {
   height: 100%;
   width: 100%;
}

.header {
   height: 10%;
   vertical-align: bottom;
   font-size: 14pt;
   background: khaki; /* suppress this */
}

.bdy {
   height: 80%;
   vertical-align: middle;
   font-size: 22pt;
   font-weight: bold;
   background: lightblue; /* suppress this */
}

.footer {
   height: 10%;
   vertical-align: bottom;
   font-size: 12pt;
   background: lightgreen; /* suppress this */
}

.center {
   text-align: center;
   text-indent: 0;
   margin: 0;
}

and the following html text:

Code:

<body>
  <div class="container">
    <table class="full" cellpadding="0" cellspacing="0">
      <tbody class="full">
        <tr>
          <td class="header">
            <p class="center">THIS IS THE HEADER</p>
          </td>
        </tr>

        <tr>
          <td class="bdy">
            <p class="center">THIS CAN BE<br/><big><big>A TITLE</big></big></p>
          </td>
        </tr>

        <tr>
          <td class="footer">
            <p class="center">THIS IS THE FOOTER</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

You can see how the code looks in ADE with different font sizes:

Click image for larger version

Name: Image1.png
Views: 293
Size: 48.1 KB
ID: 182850

Click image for larger version

Name: Image2.png
Views: 278
Size: 46.2 KB
ID: 182851

I used three colors as background so you can see the layout but you have to erase that property, so the page will look clean. Also take into account that I used "pt" as measurement of font-size. Of that way the layout won't be broken when the user change the font size (all that in ADE). You can open the epub I attach to see how it works in ADE.

Regards
Rubén

RbnJrg · 10-17-2020, 06:36 PM

Quote:

Originally Posted by DiapDealer

I'm pretty sure a footer is possible with HTML5 in an EPUB3, but it wouldn't be supported by a lot of readers/apps out there.

You can mimic a footer also in epub 2 but only for one page (the most common case is a title page), that is supported by ADE. Read my answer to the OP.

RbnJrg · 10-17-2020, 06:38 PM

Quote:

Originally Posted by Quoth

Short answer is that what you want is like a footer. So NO.
Possible on paper and a web page (but really really annoying on a web page) but not possible on an ebook. No Headers or Footers except by the GUI on an ebook.

It's possible to get a header and a footer for one page also in epub2. See my answer to the OP.

fbrzvnrnd · 10-20-2020, 05:19 PM

Quote:

Originally Posted by RbnJrg

You can mimic a footer also in epub 2 but only for one page (the most common case is a title page), that is supported by ADE. Read my answer to the OP.

Nice, but it do not work on Apple Books, right?

RbnJrg · 10-20-2020, 08:42 PM

Quote:

Originally Posted by fbrzvnrnd

Nice, but it do not work on Apple Books, right?

It could work but the font-size won't be frozen (and eventually the size of the font will break the layout). And maybe it would be a good idea to change the height for the html and body tags from 100% to 97-98% in order to not generate a blank page after the main page. Just be sure that the table is enclosed in a div block (of that way the table always will ocuppy the height of the div block that will be 100%). If you don't use a div block, you can have issues with the height of the table and not to be able to force a height of 100%.

fbrzvnrnd · 10-21-2020, 03:34 AM

Yes, thank you.
It is very sad that ePub format development is dead and there is no support for CSS page media and there is no CSS or Javascript support for page element.

JSWolf · 10-21-2020, 04:06 AM

The problem is that ePub 3 was screwed up by Apple for iBooks (now Books).

fbrzvnrnd · 10-21-2020, 04:35 AM

Quote:

Originally Posted by JSWolf

The problem is that ePub 3 was screwed up by Apple for iBooks (now Books).

I don't wanna go out topic but I think there are multiple problems here: Apple, you said. But I add Amazon for his "static" kindle format, the publishers fear to invest money in a digital format they really do not believe in, the DRM that freeze the 3rd parts hardware and software producers, IDPF idea to force a ebook format that *must* be a copy of a traditional book... and counting.

10-17-2020, 12:04 PM	#1
FDPuthuff Avid Learner Posts: 39 Karma: 10 Join Date: Sep 2020 Location: Charleston, SC Device: Kindle Fire, iPad	Bottom of Page If I am dealing with some front matter and I wish to 'bottom-justify' a few lines of text, is there html, which will do that, or do I add blank lines until I think I may possibly, maybe be at the bottom of the page? . . . . Like this stuff here Assume it's at the bottom of a page . And this Here

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Gaps at bottom of page on kindle	leed248680	Kindle Formats	3	09-01-2020 11:44 AM
Previous page on bottom right corner?	nickie_twisp	KOReader	2	10-15-2016 02:38 PM
text sticking to the bottom of the page	1v4n0	Workshop	2	09-23-2014 01:16 PM
Page numbers at bottom of screen	Waylander	Sony Reader	1	10-18-2013 02:21 PM
Text aligned on the bottom of the page?	NASCARaddicted	ePub	4	11-15-2010 01:14 PM

10-17-2020, 12:22 PM	#2
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	This is more EPUB-centric than it is Sigil-centric. This could get moved to the EPUB forum.

10-17-2020, 02:50 PM	#3
Quoth the rook, bossing Never. Posts: 11,158 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	Never add blank lines, on paper or ebooks or web pages. Use vertical margins as part of a paragraph style on wordprocessor which becomes CSS later. On ebooks you can't know where the bottom of a page is. You can only ever force a fresh page break, typically done at certain headings. There are also Widows and Orphans. They control if a paragraph is split and how much of it can be the widow or orphan across a page break. But you don't know in advance which paragraphs the settings will be applied to. Some people like it at 1 (which means none, there is no 0 setting) other people prefer that less than few lines will cause the entire paragraph to move to the next page.

10-17-2020, 02:53 PM	#4
Quoth the rook, bossing Never. Posts: 11,158 Karma: 85874891 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11	Short answer is that what you want is like a footer. So NO. Possible on paper and a web page (but really really annoying on a web page) but not possible on an ebook. No Headers or Footers except by the GUI on an ebook.

10-17-2020, 03:08 PM	#5
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 Join Date: Nov 2009 Device: many	You could use svg to create a "cover" like page and scale it to the screen height "100vh". An svg image can be made of text as well as images.

10-17-2020, 03:12 PM	#6
JSWolf Resident Curmudgeon Posts: 73,983 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Ordo it like is done with most title pages. create the frontmatter it as a hi-res graphic and display is full screen. It will display where you want.

10-17-2020, 04:09 PM	#7
DiapDealer Grand Sorcerer Posts: 27,549 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I'm pretty sure a footer is possible with HTML5 in an EPUB3, but it wouldn't be supported by a lot of readers/apps out there.

10-21-2020, 03:34 AM	#13
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	Yes, thank you. It is very sad that ePub format development is dead and there is no support for CSS page media and there is no CSS or Javascript support for page element.

10-21-2020, 04:06 AM	#14
JSWolf Resident Curmudgeon Posts: 73,983 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	The problem is that ePub 3 was screwed up by Apple for iBooks (now Books).

Advert

Advert