Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 11-27-2021, 10:41 PM   #1
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
Numbered list help

Hi - sorry if I'm repeating something what was already discussed here...
I created a numbered list in my epub file using negative top margin.

<p class="calibre1">1.</p> /then the text related to the number/
<dd style="margin-top: -18px;">Example text one</dd>

the next list number:

<p class="calibre1">2.</p> /and then the related text/
<dd style="margin-top: -18px;">Example text two</dd>

And so on…

It seems quite simple, works OK... until I open the epub in a reader - the numbers and the related text usually became crooked – vertically misaligned…
How can it be fixed so that the numbers will be always in line with the related text when opened on any device ?

Thanks
Bigo2 is offline   Reply With Quote
Old 11-27-2021, 10:53 PM   #2
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 4,969
Karma: 48000005
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
I am curious why you believe that would ever work?
jhowell is offline   Reply With Quote
Advert
Old 11-27-2021, 11:04 PM   #3
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 1,381
Karma: 13988852
Join Date: Nov 2019
Device: none
Have you tried html's ordered lists? There are also various sites on the web that explain how to make them prettier than they are without any CSS styling.

https://www.w3schools.com/html/html_lists_ordered.asp

Also, rather than use a style= on each tag it's better to use a stylesheet.

https://www.w3schools.com/css/css_howto.asp

With sigil you put it in the Styles folder, then right click on the html files and select your stylesheet to link it and sigil ands the link rel= for you with the proper path.
Attached Thumbnails
Click image for larger version

Name:	Screenshot 2021-11-27 190214.png
Views:	66
Size:	100.5 KB
ID:	190483  

Last edited by hobnail; 11-27-2021 at 11:07 PM.
hobnail is offline   Reply With Quote
Old 11-27-2021, 11:04 PM   #4
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
jhowel and hobnail thanks for your answer

But it does work... The negative top margin sends the line up. Only on some devices it became misaligned. Why?
I know how to create numbered list <ol> <li> or <ul> <li>
I was only curious if this can be done - it seem to be possible but...

Last edited by Bigo2; 11-27-2021 at 11:07 PM.
Bigo2 is offline   Reply With Quote
Old 11-27-2021, 11:17 PM   #5
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 4,969
Karma: 48000005
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
Quote:
Originally Posted by Bigo2 View Post
Only on some devices it became misaligned. Why?
Again, the question is why you believe that going up exactly 18 pixels is going to bring it into alignment with the prior paragraph?
jhowell is offline   Reply With Quote
Advert
Old 11-27-2021, 11:20 PM   #6
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
Quote:
Originally Posted by jhowell View Post
Again, the question is why you believe that going up exactly 18 pixels is going to bring it into alignment with the prior paragraph?
I just tried until it seemed to be OK in the Book View...
Also the line height can be set

Last edited by Bigo2; 11-27-2021 at 11:23 PM.
Bigo2 is offline   Reply With Quote
Old 11-27-2021, 11:36 PM   #7
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 4,969
Karma: 48000005
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
Quote:
Originally Posted by Bigo2 View Post
I just tried until it seemed to be OK in the Book View...
Also the line height can be set
As you found that is just by chance. Also a page break can occur between pairs and that will really mess things up.
jhowell is offline   Reply With Quote
Old 11-27-2021, 11:50 PM   #8
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
OK - I thought there was some setting which would guarantee something will be exactly where I want it...

Why was I trying this? I wanted a different fancy font for the number, but I don't know how to do it. This way I described would have been simple.

Basically I don't know how to use different fonts on the same line...

Last edited by Bigo2; 11-28-2021 at 12:04 AM.
Bigo2 is offline   Reply With Quote
Old 11-28-2021, 12:32 AM   #9
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 17,375
Karma: 84106281
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Kobo Forma, Kobo Clara HD, Lenovo M8 FHD, iPad Pro, Tolino
If you think you've seen misalignment, wait until you have multiple fonts on the same line. Unless they are very carefully matched, fonts can and will have different line heights, ascender and descender values and line spacing. You are likely to find yourself generating text that resembles a ransom note.
DNSB is offline   Reply With Quote
Old 11-28-2021, 01:09 AM   #10
Karellen
Addict
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 213
Karma: 872186
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Quote:
Originally Posted by Bigo2 View Post
I wanted a different fancy font for the number, but I don't know how to do it.
Do you have a screenshot of what you are trying to achieve?

How different does the font need to be. Can it be as simple as "fantasy" -v- "serif" -v- "sans-serif" -v- "monospace" or are you trying to achieve some pretty striking gothic type text?
Karellen is offline   Reply With Quote
Old 11-28-2021, 02:00 AM   #11
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
Karellen thanks -
I don't know how to put the screenshot here - where would I send it?
This concerns a Czech text concerning the Bitcoin B/S.
For the common text I used "Charis SIL Compact" and for the titles I used "GemunuLibre-SemiBold" so the same Gemunu font I also wanted to use for the mumbered lists.
(But I don't have to...)
In the Sigil Book View (yes I'm using an older version with the Book View) as well as in the Calibre E-book viewer this looks 100% - even after AZW3 conversion. But in Kindle the lines are slightly misaligned...
I thought for you code wizards here it would a simple solution...

Last edited by Bigo2; 11-28-2021 at 02:05 AM.
Bigo2 is offline   Reply With Quote
Old 11-28-2021, 02:24 AM   #12
Karellen
Addict
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 213
Karma: 872186
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
In the Editors bar above the text box, in the first row click on the paperclip icon.

If you don't have that icon, underneath the text box click Go Advanced.
Karellen is offline   Reply With Quote
Old 11-28-2021, 02:31 AM   #13
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
Karellen
Attached Thumbnails
Click image for larger version

Name:	2021-11-28_161110.jpg
Views:	77
Size:	53.2 KB
ID:	190484   Click image for larger version

Name:	2021-11-28_171314.jpg
Views:	75
Size:	112.9 KB
ID:	190486  

Last edited by Bigo2; 11-28-2021 at 02:44 AM.
Bigo2 is offline   Reply With Quote
Old 11-28-2021, 08:05 AM   #14
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,293
Karma: 5625799
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Bigo2 View Post
How can it be fixed so that the numbers will be always in line with the related text when opened on any device ?

Thanks
What you want is quite easy to get with ordered list... under epub3 In theory, the method could work also under epub2 (at least, it will do with webkit) but it won't work with old ereaders based on RMSDK. Here is what you need to do:

1) In your .xhtml file write a normal ordered list (something like):

Code:
  <ol>
    <li>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.</li>

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

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

    <li>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.</li>
  </ol>
2) In your .css stylesheet write the following:

Code:
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  font-family: serif;
  margin-bottom: 0.5em;
  margin-left: 2em;
  text-align: justify;
}

li::before {
  display: inline-block;
  font-family: sans-serif;
  font-weight: bold;
  color: crimson;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}
That's all. As you can see, numbers are with a different font-family than the text and another color and parenthesis. Here you can watch some screenshots:

Click image for larger version

Name:	Image1.png
Views:	69
Size:	56.2 KB
ID:	190489Click image for larger version

Name:	Image2.png
Views:	63
Size:	58.8 KB
ID:	190490Click image for larger version

Name:	Image3.png
Views:	58
Size:	58.5 KB
ID:	190491Click image for larger version

Name:	Image4.png
Views:	55
Size:	162.0 KB
ID:	190492

Below you can check the respective epub. It could be possible to get something that also works under epub2 with old ereaders by using the property "display: inline-block" and creating two blocks (for example one block with a width of 5% for numbers and another block with a width of 90% for the text) but it's more complicated (although possible) to write that. For each paragraph you'll need something like:

Code:
<p><span class="block1">1)</span><span class="block2">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.</span></p>

<p><span class="block1">2)</span><span class="block2">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.</span></p>
and

Code:
p  {
  margin: 0 0 1em;
}

.block1 {
  display: inline-block;
  width: 5%;
  vertical-align: top;
  padding-right: 1em;
  text-align: right;
  font-family: sans-serif;
  color: crimson;
}

.block2 {
  display: inline-block;
  width: 90%;
  text-align: justify;
  font-family: serif;
}
Regards
Attached Files
File Type: epub Custom Ordered List.epub (2.8 KB, 38 views)

Last edited by RbnJrg; 11-28-2021 at 08:07 AM.
RbnJrg is offline   Reply With Quote
Old 11-28-2021, 08:58 AM   #15
Bigo2
Zealot
Bigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchforkBigo2 can load mercury with a pitchfork
 
Posts: 129
Karma: 48786
Join Date: Oct 2010
Location: Australia - Adelaide
Device: Kindle3
RbnJrg - perfect and not complicated! I'm going to play with this...

Thank you very much!
Bigo2 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Converting Epub3 to mobi - TOC becomes numbered list readerwriter Conversion 7 10-21-2021 01:59 PM
Numbered List (ol) Problem w/Sigil v0.9.6 and Kindle planewryter Sigil 9 07-18-2016 10:22 PM
Numbered and bulleted list format lost on Nook Simple Touch epub Pondering ePub 2 10-15-2013 10:19 AM
Are The Days Of The $14.99 Ebook Numbered? Top100EbooksRank News 64 01-21-2013 10:23 PM
Numbered list continuation bhuvana786 ePub 4 05-26-2010 02:17 AM


All times are GMT -4. The time now is 04:08 AM.


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