Bullet indents

DrivingTest · 07-31-2022, 07:53 AM

I've created a book in Word which has been converted into ePub format before being opened in Sigil. The book has a number of unordered lists which show up in the HTML like this:

<ul class="list_">
<li class="block_22">item 1</li>
<li class="block_22">item 2</li>
<li class="block_22">item 3</li>
<li class="block_22">item 4</li>
</ul>

The bullets appear to indented much deeper than in the original Word file. I'm thinking it should be simple enough the decrease the indent but I can't figure out how?

Sigil has toolbars at the top, one of which has a 'decrease indent' button, but how do I actually use this to change what I see in the HTML or preview window?

Thanks

Turtle91 · 07-31-2022, 08:20 AM

I would not use the increase/decrease indent buttons - they simply add/remove a <blockquote> around the text you have highlighted...the blockquote artificially increases the indent at the cost of being really ugly code, and being semantically incorrect.

Instead, you can use the padding and margin elements in your attached css style sheet.

margin-left is the amount of space between the left edge of the <ul> container and the list symbol. padding-left is the distance between the symbol and the text. You can also define margins around the <ul> independently of the list items.

Here is an example of some styling you could use...adapt as you desire.

Code:

CSS:
ul {margin:.5em; list-style-type:disc}
li {margin-left:.5em; padding-left:1em}

HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

The above example does not include classes - they are unnecessary if you want all your lists to be styled the same. If you want them to look differently then all you need to do is have a class in the <ul> with the styling like this:

Code:

CSS:
ul {margin:.5em; list-style-type:disc}
li {margin-left:.5em; padding-left:1em}

ul.someclass li {color:green; font-style:italic}

HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

<ul class="someclass">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>

DrivingTest · 07-31-2022, 09:28 AM

Thanks for that, sometimes we just overlook the obvious. I'm new to Sigil, think it's a great tool but for some reason just didn't realise there was an attached stylesheet..... doh!

Turtle91 · 07-31-2022, 10:20 AM

lol - no worries! I'm still finding features in Sigil that I didn't know existed...

You can make sure the stylesheet is attached/linked by making sure that there is something like:

<link href="../Styles/styles.css" type="text/css" rel="stylesheet"/>

in the <head> section of your html pages...where styles.css is the name of your stylesheet.

This can be done automagically by right clicking on the html file(s) in your Book Browser window and selecting "Link Stylesheets..." then checking the box next to the sheet you want to link.

07-31-2022, 07:53 AM	#1
DrivingTest Member Posts: 12 Karma: 10 Join Date: Jul 2022 Device: Kindle	Bullet indents I've created a book in Word which has been converted into ePub format before being opened in Sigil. The book has a number of unordered lists which show up in the HTML like this: <ul class="list_"> <li class="block_22">item 1</li> <li class="block_22">item 2</li> <li class="block_22">item 3</li> <li class="block_22">item 4</li> </ul> The bullets appear to indented much deeper than in the original Word file. I'm thinking it should be simple enough the decrease the indent but I can't figure out how? Sigil has toolbars at the top, one of which has a 'decrease indent' button, but how do I actually use this to change what I see in the HTML or preview window? Thanks Attached Thumbnails

07-31-2022, 08:20 AM	#2
Turtle91 A Hairy Wizard Posts: 3,099 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I would not use the increase/decrease indent buttons - they simply add/remove a <blockquote> around the text you have highlighted...the blockquote artificially increases the indent at the cost of being really ugly code, and being semantically incorrect. Instead, you can use the padding and margin elements in your attached css style sheet. margin-left is the amount of space between the left edge of the <ul> container and the list symbol. padding-left is the distance between the symbol and the text. You can also define margins around the <ul> independently of the list items. Here is an example of some styling you could use...adapt as you desire. Code: CSS: ul {margin:.5em; list-style-type:disc} li {margin-left:.5em; padding-left:1em} HTML: <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> The above example does not include classes - they are unnecessary if you want all your lists to be styled the same. If you want them to look differently then all you need to do is have a class in the <ul> with the styling like this: Code: CSS: ul {margin:.5em; list-style-type:disc} li {margin-left:.5em; padding-left:1em} ul.someclass li {color:green; font-style:italic} HTML: <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> <ul class="someclass"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <p>This is a normal paragraph.</p> <p>This is a normal paragraph.</p> Attached Thumbnails Last edited by Turtle91; 07-31-2022 at 08:32 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Bullet,numbers, indents and alignment greyed out in code view.	handycrowd	Sigil	4	02-13-2018 03:29 AM
Bullet points indented way too much	mcandre	Conversion	2	10-10-2017 11:22 PM
Indents and hanging indents in epub poetry	Derek R	ePub	14	02-19-2012 04:43 AM
Bullet List / Changes to Boldface	soulartist	Workshop	7	12-18-2010 08:32 AM

07-31-2022, 09:28 AM	#3
DrivingTest Member Posts: 12 Karma: 10 Join Date: Jul 2022 Device: Kindle	Thanks for that, sometimes we just overlook the obvious. I'm new to Sigil, think it's a great tool but for some reason just didn't realise there was an attached stylesheet..... doh!

07-31-2022, 10:20 AM	#4
Turtle91 A Hairy Wizard Posts: 3,099 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	lol - no worries! I'm still finding features in Sigil that I didn't know existed... You can make sure the stylesheet is attached/linked by making sure that there is something like: <link href="../Styles/styles.css" type="text/css" rel="stylesheet"/> in the <head> section of your html pages...where styles.css is the name of your stylesheet. This can be done automagically by right clicking on the html file(s) in your Book Browser window and selecting "Link Stylesheets..." then checking the box next to the sheet you want to link.

Advert