List-like formatting question...

[RbnJrg]

Originally Posted by ElMiko

Okay, but e-readers don't generally allow scroll bars, right?

Wrong



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.

[ElMiko]

!

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?

[RbnJrg]

Originally Posted by ElMiko

!

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

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:

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

[ElMiko]

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?

[RbnJrg]

Originally Posted by ElMiko

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:

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

  <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:



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:

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

  <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:



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.

[ElMiko]

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?

[RbnJrg]

Originally Posted by ElMiko

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.

[ElMiko]

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?

[RbnJrg]

Originally Posted by ElMiko

From what I've gleaned from these forums, ADE is very idiosyncratic in how it interacts with CSS, though, right?

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?

You can watch the ADE 2.x bugs in this thread:

https://www.mobileread.com/forums/sh...ad.php?t=94733