List styling - dislay: none

WV-Mike · 09-12-2023, 06:48 AM

Greetings,

ReadEra still displays bullets when I use:
<ul style="list-style:none">

Or
<ul style="list-style-type:none">

In the original list I used <br/> for the line breaks which display the text in list form. Is the use of <br/> a good idea for ePubs?

Any ideas on how to correct this?
WV-Mike

Turtle91 · 09-12-2023, 08:02 AM

1) stop using inline styles…

2) see rule #1

Seriously though, you do NOT need to use <br/> ANYWHERE to create space… that is what css is for. Use margin or padding.

3) “list-style-type: none;” should work fine.

Code:

ul {list-style-type: none;}

WV-Mike · 09-12-2023, 08:49 AM

Quote:

Originally Posted by Turtle91

1) stop using inline styles…

2) see rule #1

Seriously though, you do NOT need to use <br/> ANYWHERE to create space… that is what css is for. Use margin or padding.

Other than a list, how would this be accomplished with CSS?

Quote:

3) “list-style-type: none;” should work fine.

Code:

ul {list-style-type: none;}

This would affect Ordered lists as well. No?

I added this to my CSS:
ul.no-bullets {list-style-type: none;}
And this to my HTML:
<ul class="no-bullets">

ReadEra still displays bullets.

Thanks,
WV-Mike

Turtle91 · 09-12-2023, 11:37 AM

No, it would not effect ordered lists unless you applied it to the ordered list...not recommended since they are 'ordered' to get a symbol of some order-type.

to apply it to an ordered list you would add this to your css:

ol {list-style-type: none;}

although I would have something like:

ol {list-style-type: decimal;}

Have you linked the stylesheet to your html files?? It must be linked to apply the styles. You should see something like the following in your html headers:

Code:

<head>
  <title>Some Title</title>
  <link href="../Styles/styles.css" type="text/css" rel="stylesheet"/>
</head>

If you haven't linked it, then, using Sigil (Calibre is similar), just highlight all your html files and then right-click on one of them and select 'Link Stylesheets...' then select the css file you want to link.

Turtle91 · 09-12-2023, 11:41 AM

Also, I think KevinH mentioned in one of your other threads that ReadEra may not properly honor the css. What does it show in the Sigil, or Calibre, preview pane? If it shows correctly in Sigil, then it's almost a certainty that it is ReadEra's issue, not your css.

Turtle91 · 09-12-2023, 12:10 PM

Quote:

Originally Posted by WV-Mike

Other than a list, how would this be accomplished with CSS?

You could use css to make ANY tag look like any other tag. However, the point of using the correct tag is so that your document is using the correct semantic markup. This helps automated devices (and some weird humans who look at the coding

) parse the document properly.

For example, I used the following css on a style sheet to make a list of paragraphs look just like the unordered list. (see attachment)

Code:

/* list-style-type Formal syntax: disc | circle | square | decimal |
decimal-leading-zero | lower-roman | upper-roman | lower-greek |
lower-latin | upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none */

ol {margin:.5em; list-style-type:upper-roman} 
ul {margin:.5em; list-style-type:none}
li {margin:0 0 .5em}

div.list   {margin:1em 2em}
div.list p {margin:0 0 .5em; text-indent: 0}

Click image for larger version

Name: Screenshot 2023-09-12 115340.png
Views: 20
Size: 195.1 KB
ID: 203720

One of the main benefits of using a css sheet is that I only have to change/update/fix the styling in one location and it is applied throughout the document...much faster!

If I wanted to add a list style I could change 'none' to 'disc' on the css file to update all the <ul>s at once, but I'd have to manually add the disc symbol to every paragraph if I used the <div>. (note: there is a way to automatically add the disc image in front of the <p> in each <div> using css but that is beyond the scope of the question and the OP's experience level.)

Click image for larger version

Name: Screenshot 2023-09-12 120246.png
Views: 18
Size: 103.2 KB
ID: 203721

WV-Mike · 09-12-2023, 02:37 PM

Quote:

Originally Posted by Turtle91

Also, I think KevinH mentioned in one of your other threads that ReadEra may not properly honor the css. What does it show in the Sigil, or Calibre, preview pane? If it shows correctly in Sigil, then it's almost a certainty that it is ReadEra's issue, not your css.

It looks fine in both Sigil and Calibre.
Seems ReadEra is not applying the CSS for the list.

Thanks,
WV-Mike

WV-Mike · 09-12-2023, 02:39 PM

Quote:

Originally Posted by Turtle91

No, it would not effect ordered lists unless you applied it to the ordered list...not recommended since they are 'ordered' to get a symbol of some order-type.

Duh. That is obvious now.

Quote:

Have you linked the stylesheet to your html files??

Yes, all HTML files are linked.

Thanks,
WV-Mike

WV-Mike · 09-12-2023, 02:49 PM

Quote:

Originally Posted by Turtle91

You could use css to make ANY tag look like any other tag. However, the point of using the correct tag is so that your document is using the correct semantic markup. This helps automated devices (and some weird humans who look at the coding

) parse the document properly.

For example, I used the following css on a style sheet to make a list of paragraphs look just like the unordered list. (see attachment)

...

Burp...
That is a lot to digest.
Since it now seems like ReadEra is the culprit and will show the bullets regardless of the CSS, what are the other options?

I know the <br/> is a "no-no" but it gets the desired effect for this use.
Surely others use stanzas in ePubs. If <ul style="list-style-type:none"> is used instead of <br/> there is no guarantee the bullets will not be displayed.

Or, I am off base here and not grokking all this?
Thanks,
WV-Mike

DNSB · 09-12-2023, 03:42 PM

You might try blockquoting the stanzas instead of using a list. Or you could check for suggestions on poetry/stanzas CSS. One example would be A bit of poetry CSS you may find useful. Remember if you steal from one person, that's plagiarism; if you steal from multiple people, it's research.

WV-Mike · 09-12-2023, 04:07 PM

Quote:

Originally Posted by DNSB

You might try blockquoting the stanzas instead of using a list. Or you could check for suggestions on poetry/stanzas CSS. One example would be A bit of poetry CSS you may find useful. Remember if you steal from one person, that's plagiarism; if you steal from multiple people, it's research.

Wow. This list is quite the gold mine - there are some *serious* CSSers here!

I am going to start mining some of that gold and see what I can find out and use for this display: none issue.
I will report back when I decide on who's CSS to steal.

Thanks to all...
WV-Mike
p.s. This is finally starting to get fun.

DiapDealer · 09-13-2023, 08:07 AM

The only thing I would use a list for in an epub is to present a standard list that uses either bullets (unordered) or numbers (ordered). No diddling of the bullets or start number. And even then I would consider styling paras, divs, or blockquotes instead. Lists are the bane of anyone seeking homogenous rendering across the widest range of reading devices/apps possible. They always break some rendering system somewhere.

WV-Mike · 09-13-2023, 09:30 AM

Quote:

Originally Posted by DNSB

You might try blockquoting the stanzas instead of using a list. Or you could check for suggestions on poetry/stanzas CSS. One example would be A bit of poetry CSS you may find useful. Remember if you steal from one person, that's plagiarism; if you steal from multiple people, it's research.

I settled on something simple for the poem styling.

.poem {
margin: auto;
width: 80%;
padding: 10px;
line-height: 1.4em
}

<div class="poem">

<p>Virginia Creeper, creeping</p>
<p>Up the base of tall oak tree</p>
<p>All over Green Cathedral--</p>
<p>The creeper I can see.</p>
</div>

It renders as expected in both Reasily and ReadEra.
Other readers? Who knows...
Thanks,
WV-Mike

WV-Mike · 09-13-2023, 09:31 AM

Quote:

Originally Posted by DiapDealer

The only thing I would use a list for in an epub is to present a standard list that uses either bullets (unordered) or numbers (ordered). No diddling of the bullets or start number. And even then I would consider styling paras, divs, or blockquotes instead. Lists are the bane of anyone seeking homogenous rendering across the widest range of reading devices/apps possible. They always break some rendering system somewhere.

Point taken.
Thanks for the advice.

WV-Mike

Quoth · 09-13-2023, 04:18 PM

Quote:

Originally Posted by DiapDealer

The only thing I would use a list for in an epub is to present a standard list that uses either bullets (unordered) or numbers (ordered). No diddling of the bullets or start number. And even then I would consider styling paras, divs, or blockquotes instead. Lists are the bane of anyone seeking homogenous rendering across the widest range of reading devices/apps possible. They always break some rendering system somewhere.

Yes, actually I now don't use lists at all. Just a paragraph style with manually entered bullets or numbers or letters etc. List HTML is handy for server generated dynamic content on a web site. It's just an apparent convenience in a word processor or ebook.

09-12-2023, 08:02 AM	#2
Turtle91 A Hairy Wizard Posts: 2,890 Karma: 18274621 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	1) stop using inline styles… 2) see rule #1 Seriously though, you do NOT need to use <br/> ANYWHERE to create space… that is what css is for. Use margin or padding. 3) “list-style-type: none;” should work fine. Code: ul {list-style-type: none;}

09-12-2023, 11:37 AM	#4
Turtle91 A Hairy Wizard Posts: 2,890 Karma: 18274621 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	No, it would not effect ordered lists unless you applied it to the ordered list...not recommended since they are 'ordered' to get a symbol of some order-type. to apply it to an ordered list you would add this to your css: ol {list-style-type: none;} although I would have something like: ol {list-style-type: decimal;} Have you linked the stylesheet to your html files?? It must be linked to apply the styles. You should see something like the following in your html headers: Code: <head> <title>Some Title</title> <link href="../Styles/styles.css" type="text/css" rel="stylesheet"/> </head> If you haven't linked it, then, using Sigil (Calibre is similar), just highlight all your html files and then right-click on one of them and select 'Link Stylesheets...' then select the css file you want to link.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
TOC styling	stellatus	Editor	2	02-19-2022 05:32 PM
Styling of the dictionary in Neoreader	Markismus	Onyx Boox	1	10-26-2020 04:34 AM
Styling of H1 not as expected	Arkadian	Conversion	5	09-09-2014 05:49 AM
Styling lists	democrite	ePub	12	01-17-2013 02:03 PM

09-12-2023, 06:48 AM	#1
WV-Mike Connoisseur Posts: 66 Karma: 10 Join Date: Jul 2023 Device: None	List styling - dislay: none Greetings, ReadEra still displays bullets when I use: <ul style="list-style:none"> Or <ul style="list-style-type:none"> In the original list I used <br/> for the line breaks which display the text in list form. Is the use of <br/> a good idea for ePubs? Any ideas on how to correct this? WV-Mike

09-12-2023, 11:41 AM	#5
Turtle91 A Hairy Wizard Posts: 2,890 Karma: 18274621 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	Also, I think KevinH mentioned in one of your other threads that ReadEra may not properly honor the css. What does it show in the Sigil, or Calibre, preview pane? If it shows correctly in Sigil, then it's almost a certainty that it is ReadEra's issue, not your css.

09-12-2023, 03:42 PM	#10
DNSB Bibliophagist Posts: 29,309 Karma: 131560569 Join Date: Jul 2010 Location: Vancouver Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos	You might try blockquoting the stanzas instead of using a list. Or you could check for suggestions on poetry/stanzas CSS. One example would be A bit of poetry CSS you may find useful. Remember if you steal from one person, that's plagiarism; if you steal from multiple people, it's research.

09-13-2023, 08:07 AM	#12
DiapDealer Grand Sorcerer Posts: 27,019 Karma: 190776330 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	The only thing I would use a list for in an epub is to present a standard list that uses either bullets (unordered) or numbers (ordered). No diddling of the bullets or start number. And even then I would consider styling paras, divs, or blockquotes instead. Lists are the bane of anyone seeking homogenous rendering across the widest range of reading devices/apps possible. They always break some rendering system somewhere.

Advert

Advert