Mobileread
Alignement of blocks
#1  Ghitulescu 09-02-2019, 02:17 PM
I need to simulate a table in that several lines are indented as the first one of the block. I thought I solved it using inline-block, yet when one of the lines is longer that needs to be split onto two display lines, the alignement disappears.

See the following image:
image »

The coloured borders are there to help identify the blocks as they are.

The code uses inline-block and clear as properties for the blocks. I tried every combination possible with p, div and span, and the image was taken using a span inside a p. I don't wanna use float.

I also don't want to use a table since I only have 3 or 4 cases where I need this arrangement but hundreds of references.
epub.4a.png 
Reply 

#2  RbnJrg 09-02-2019, 08:06 PM
Why don't use a negative indent? Something like:

Code
.negindent { margin-left: 2em; text-indent: -2.0em;
}
and

Code
<p class="negindent">162. —How do you do?<br/>—How do you do?</p>
It seems to work.

show attachment »

Regards
Rubén

EDIT: What are you working with? Epub2? Epub3? And of course always you have the choice of using the "float: left" property for the number. Just give the class a proper height for example:

Code
.nfloat { float: left; height: 4em; background: khaki; /* remove this */
}
and

Code
<p><span class="nfloat">162. </span>—How do you do?<br/>—How do you do?<br/>—Please a coffe.</p>
show attachment »

Add also a proper right margin to the floated number.
Reply 

#3  Ghitulescu 09-03-2019, 06:41 AM
I can't use a negative indent because it's variable (there are numbers of 1-2-3 digits).
I don't want to use float for it's rendered differently by various ereaders if the page ends right there, in between. Plus, again, it's width has to be dynamically computed, which I understand is possible only in epub3.

Sorry, it's epub2.
Reply 

#4  Turtle91 09-03-2019, 09:05 AM
You can use an unordered list with a different class depending on how many digits are in the number. The borders in the CSS are just to show the box-model spacing.

The mdash is not an option as a list-item marker, so I just did a quick .png file so I could use the list-style-image property. You will want to make a different image so that it aligns vertically a little better.

CSS:
Code
p {margin:0; border:1px solid green}
p.spc {margin-top:2em}
ul {margin:-1.2em 0 0; list-style-image:url('../Images/bar.png'); border:1px solid red}
ul.one {margin-left:.6em}
ul.two {margin-left:1.15em}
ul.three {margin-left:1.7em}
ul.four {margin-left:2.2em}
HTML:
Spoiler Warning below






Code
<p class="spc">1 Yellow Desert.</p>
<p>2 White Mountain.</p>
<p>3 Green Valley.</p>
<p>4
<ul class="one">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>5 Red Sea.</p>
<p>6 Yellow Desert.</p>
<p class="spc">59 Yellow Desert.</p>
<p>60 White Mountain.</p>
<p>61 Green Valley.</p>
<p>62
<ul class="two">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>63 Red Sea.</p>
<p>64 Yellow Desert.</p>
<p class="spc">159 Yellow Desert.</p>
<p>160 White Mountain.</p>
<p>161 Green Valley.</p>
<p>162
<ul class="three">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>163 Red Sea.</p>
<p>164 Yellow Desert.</p>
<p class="spc">1159 Yellow Desert.</p>
<p>1160 White Mountain.</p>
<p>1161 Green Valley.</p>
<p>1162
<ul class="four">
<li>How do you do?</li>
<li>How do you do?</li>
<li>Please have a coffee with us! We are so happy to see you after all this time! Do sit down, will you! Mary, would you dear bring us some cookies?</li>
</ul></p>
<p>1163 Red Sea.</p>
<p>1164 Yellow Desert.</p>


Unfortunately, you still won't be able to completely predict how each device will split pages. They may still split the <ul> off to the next page.
1.jpg 3.jpg 
Reply 

#5  RbnJrg 09-03-2019, 09:19 AM
In combination with unordered list as Turtle91 appointed, you can also use ordered list, and not only for the problematic blocks, but for all. But if you only want to use ordered list for the problematic blocks, then do the following:

Code
 <ol start="162"> <li><p>—How do you do? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p> <p>—How do you do?</p> <p>—Please a coffe.</p></li> </ol>
and in the .css stylesheet:

Code
li p { margin: 0em 0em 0em 1em; text-indent: -1em;
}
show attachment »

So the drawback for using negative indents is superated (since numbers are not involved).
Reply 

#6  Turtle91 09-03-2019, 10:04 AM
I definitely prefer RbnJrg's use of ordered lists. However, I've heard that some devices don't work well with <ol> - is that still true??

RE my previous post: you could use a simple SVG instead of creating a .png

SVG:
Code
<svg width="1em" height="1em" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1=".1em" x2=".9em" y1=".6em" y2=".6em" stroke="black" stroke-width="1"/>
</svg>
CSS:
Code
ul {margin:-1.2em 0 0; list-style-image:url('../Images/dash.svg'); border:1px solid red}
Reply 

#7  Ghitulescu 09-03-2019, 10:42 AM
But then I get into the unsolvable issue of not being able to link the automatically generated number to the text it serves.

I can't belive nobody ever had this issue before.
Reply 

#8  Ghitulescu 09-03-2019, 10:55 AM
Sorry, for the previous answer - I haven't seen the spoiler opens into a HTML code.
This might be the answer I was looking for.

Thank you.
Reply 

#9  Ghitulescu 09-03-2019, 11:04 AM
I used the ul with attribute none and the mdash as part of the text.
The margin-top of -1.2em also contributed to the trick.
Reply 

#10  Turtle91 09-03-2019, 11:22 AM
Quote Ghitulescu
I used the ul with attribute none and the mdash as part of the text.
The margin-top of -1.2em also contributed to the trick.
I thought you wanted the mdash to be separated from the text (no overlap with the words), that's why I went with the list-style-image. As long as you are happy with it, sweet!
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register