Alignement of blocks

[Ghitulescu]

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:


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.

[RbnJrg]

Why don't use a negative indent? Something like:

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

and

<p class="negindent">162. —How do you do?<br/>—How do you do?</p>

It seems to work.



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:

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

and

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

Add also a proper right margin to the floated number.

[Ghitulescu]

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.

[Turtle91]

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:

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:

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

[RbnJrg]

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:

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

li p {
  margin: 0em 0em 0em 1em;
  text-indent: -1em;
}

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

[Turtle91]

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:

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

ul    {margin:-1.2em 0 0; 
       list-style-image:url('../Images/dash.svg'); 
       border:1px solid red}

[Ghitulescu]

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.

[Ghitulescu]

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.

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

[Turtle91]

Originally Posted by 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!

[RbnJrg]

Originally Posted by Ghitulescu

But then I get into the unsolvable issue of not being able to link the automatically generated number to the text it serves.

What links are you refering to? I didn't read any mention to links in your previous comments. If you are refering that the number is a link, well, then is not an unsolvable issue to put a link to a number of an ordered list.

[Turtle91]

It was a different thread - and yes, he was referring to the auto generated number in an <ol>

[RbnJrg]

Originally Posted by Turtle91

It was a different thread - and yes, he was referring to the auto generated number in an <ol>

In that case, to put a link to the autogenerated numbers is so easy (or so difficult) as to put a link to anything. It's not an unsolvable issue at all.

[Turtle91]

Care to give an example of how to create a link on a number generated when a page is rendered?

[RbnJrg]

Originally Posted by Turtle91

Care to give an example of how to create a link on a number generated when a page is rendered?

Yes, of course. I'm going to write a code that works in both, RMSDK and WebKit. The code for webkit is simpler but with this, it will work everywhere. In the .xhtml file:

  <ol>
    <li><a class="myN" href="../Text/Section0002.xhtml#N1">*******</a> 

    <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.</p>

    <p>—How do you do?</p>

    <p>—Please a coffe.</p></li>
</ol>

and in the .css file:

li {
  margin-bottom: 1em;
  margin-left: -0.5em;
  color: red;  /* This is to mimic the format used by the OP */
  font-weight: bold;
}

li p {
  margin: 0em 0em 0em 1em;
  text-indent: -1em;
  color: black;
  font-weight: normal;
}

a.myN {
  float: left;
  margin-left:-2em;
  height: 1.2em;
  text-decoration: none; /* Again, to mimic the format used by the OP */
}

Below I attach an .epub (open it in ADE) so you can watch better how work the links in numbers of an ordered list.

Regards
Rubén