Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 07-08-2025, 10:49 AM   #31
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,775
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
Okay, but e-readers don't generally allow scroll bars, right?
Wrong

Click image for larger version

Name:	One1.jpg
Views:	21
Size:	32.6 KB
ID:	216801 Click image for larger version

Name:	One2.jpg
Views:	20
Size:	36.1 KB
ID:	216802 Click image for larger version

Name:	One3.jpg
Views:	19
Size:	37.9 KB
ID:	216803

If the tittle is short, then no scroll bar is showed, otherwise the bar is there. Watch the attached epub and try to increase the font-size to see what happens.
Attached Files
File Type: epub Two_Cols.epub (2.4 KB, 11 views)

Last edited by RbnJrg; 07-08-2025 at 04:57 PM.
RbnJrg is online now   Reply With Quote
Old 07-08-2025, 11:36 AM   #32
ElMiko
Evangelist
ElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileRead
 
ElMiko's Avatar
 
Posts: 451
Karma: 65460
Join Date: Jun 2011
Device: Kindle
!

Learning something new every day.

in your css, you have the left column at 45%, the right column at 50%, with a 10px right-margin for the left column. How'd you do the math for converting the left-over 5% into px?

Also, it seems that this solution basically makes the nowrap kind of meaningless since the column widths are fixed, right?
ElMiko is offline   Reply With Quote
Old 07-08-2025, 12:00 PM   #33
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,775
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
!

Learning something new every day.

in your css, you have the left column at 45%, the right column at 50%, with a 10px right-margin for the left column. How'd you do the math for converting the left-over 5% into px?
In this case, based on trial and error

Quote:
Also, it seems that this solution basically makes the nowrap kind of meaningless since the column widths are fixed, right?
You can have all, dinamic width and also "white-space: nowrap"; just employ for the first column:

Code:
.col1 {
  display: inline-block;
  width: max-content;
  max-width: 45%;
  vertical-align: top;
  margin-right: 10px;

  white-space: nowrap;
  overflow: auto;
  text-overflow: clip;
}
Of course, this will change the width of the first column but not the width of .col2 that still will be 50%
RbnJrg is online now   Reply With Quote
Old 07-08-2025, 05:13 PM   #34
ElMiko
Evangelist
ElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileRead
 
ElMiko's Avatar
 
Posts: 451
Karma: 65460
Join Date: Jun 2011
Device: Kindle
I've always considered myself a jack of all trades, master of none. Nothing reinforces this more effectively than the sheer number of css styles and attributes I've never even heard of...

Can you pair the "max content" in the first column with "fit content" in the second?
ElMiko is offline   Reply With Quote
Old 07-08-2025, 09:08 PM   #35
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,775
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
Can you pair the "max content" in the first column with "fit content" in the second?
Yes, but I am not going to solve all of your issues

1. In your .css stylesheet:

Code:
.container {
  display: flex;
}

.col1 {
  display: inline-block;
  width: max-content;
  max-width: 45%;
  margin-right: 10px;
  white-space: nowrap;
  overflow: auto;
  text-overflow: clip;
  flex-shrink: 0;
}

.col2 {
  flex-grow: 1;
}
2. In your .xhtml file:

Code:
  <div class="container">
    <p class="col1">This is a line</p>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

  <div class="container">
    <p class="col1">This is a quite long line of text</p>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>
This is a screenshot of the output:

Click image for larger version

Name:	One1.jpg
Views:	13
Size:	36.3 KB
ID:	216807

As you can see, in this approach, the scroll bar is positioned in the first column, flush with the end of the second column. If you'd prefer the bar to be positioned below the line in the first column, you should use the following code:

1. In your .css stylesheet:

Code:
.container {
  display: flex;
}

.col1 {
  width: max-content;
  max-width: 45%;
  margin-right: 10px;
  flex-shrink: 0;
}

.scrollBox {
  white-space: nowrap;
  overflow: auto;
  text-overflow: clip;
  max-height: 2.4em;
}

.col2 {
  flex-grow: 1;
}
2. In your .xhtml file:

Code:
  <div class="container">
    <div class="col1">
      <p class="scrollBox">This is a line</p>
    </div>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>

  <div class="container">
    <div class="col1">
      <p class="scrollBox">This is a quite long line of text</p>
    </div>

    <p class="col2">This is the text asociated to the tittle on the left column.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>
  </div>
Here you have a screenshoot of the output:

Click image for larger version

Name:	One2.jpg
Views:	13
Size:	36.2 KB
ID:	216808

Of course, all this only under epub3 (and also is a sample of the power of css3 and epub3; achieving this under epub2 is unthinkable). Below I attach the respective epub.
Attached Files
File Type: epub Two_Cols_by_FlexBox.epub (3.3 KB, 14 views)

Last edited by RbnJrg; 07-08-2025 at 09:12 PM.
RbnJrg is online now   Reply With Quote
Old 07-08-2025, 10:23 PM   #36
ElMiko
Evangelist
ElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileRead
 
ElMiko's Avatar
 
Posts: 451
Karma: 65460
Join Date: Jun 2011
Device: Kindle
Sorry, which part doesn't work in epub2?

I copied your code into a blank epub2 and ran it through Sigil's ereader plugins without any apparent issue. Are the plugins reading the epub2 as if it were an epub3/in and epub3 environment?
Attached Files
File Type: epub TwoCols_Flex_EPUB2.epub (2.7 KB, 8 views)
ElMiko is offline   Reply With Quote
Old 07-08-2025, 11:09 PM   #37
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,775
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
Sorry, which part doesn't work in epub2?

I copied your code into a blank epub2 and ran it through Sigil's ereader plugins without any apparent issue. Are the plugins reading the epub2 as if it were an epub3/in and epub3 environment?
Flex-boxes are no supported by epub2. Sigil's plugins render epubs2 as if they were epubs3. If you want to see how the code looks in an epub2 ereader, then open the ebook with ADE 2.x/3.x.
RbnJrg is online now   Reply With Quote
Old 07-09-2025, 10:57 AM   #38
ElMiko
Evangelist
ElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileRead
 
ElMiko's Avatar
 
Posts: 451
Karma: 65460
Join Date: Jun 2011
Device: Kindle
From what I've gleaned from these forums, ADE is very idiosyncratic in how it interacts with CSS, though, right?

Is there a list of what CSS ADE will screw up because it's ADE versus what CSS it will screw up because it's categorically unsupported by epub2?
ElMiko is offline   Reply With Quote
Old 07-09-2025, 11:41 AM   #39
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,775
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
From what I've gleaned from these forums, ADE is very idiosyncratic in how it interacts with CSS, though, right?
Right.

Quote:
Is there a list of what CSS ADE will screw up because it's ADE versus what CSS it will screw up because it's categorically unsupported by epub2?
You can watch the ADE 2.x bugs in this thread:

https://www.mobileread.com/forums/sh...ad.php?t=94733
RbnJrg is online now   Reply With Quote
Reply


Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Formatting calibredb list? loviedovie Calibre 5 10-18-2015 02:20 PM
Help with proper dashed list formatting, desperate at this point luczak ePub 4 07-06-2011 04:18 PM
Content Master List of Books with Known Formatting Issues whitearrow Amazon Kindle 52 04-25-2010 06:57 PM
Great article on ebook formatting and web standards (A List Apart) Prospect News 6 03-10-2010 01:14 AM
line formatting formatting question daesdaemar Workshop 9 02-06-2009 11:47 AM


All times are GMT -4. The time now is 09:47 AM.


MobileRead.com is a privately owned, operated and funded community.