Possible to remove indents? - Page 7

cybmole · 02-26-2011, 05:38 AM

PS - I found this rule:
"All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions."
so I traced the sequence:

Code:

</head>

<body class="calibre">
  <div class="calibre3" id="calibre_pb_0"></div>

  <div class="calibre4" id="calibre_pb_1"></div>

  <h2 class="calibre5" id="heading_id_6"><span class="none1">Chapter 6.</span><br class="calibre6" />
  <br class="calibre6" /></h2>

  <p class="noindent"><span class="none">   ... text.....

and checked the margin definition in every class referenced above.

I still could only made your technique work by adding an explicit margin-bottom defn to my .noindent class

.calibre {
display: block;
font-size: 1em;
line-height: 1.2;
margin-bottom: 0;
margin-left: 0;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
page-break-before: always
}
.calibre1 {
display: table-row;
vertical-align: middle
}
.calibre2 {
display: block
}
.calibre3 {
border-bottom: 0;
border-top: 0;
display: block;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
page-break-after: always;
text-indent: 1em
}
.calibre4 {
display: block;
page-break-after: always
}
.calibre5 {
display: block;
font-size: 1.125em;
font-weight: bold;
line-height: 1.2;
margin-bottom: 0.3em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: center
}
.calibre6 {
display: block;
line-height: 1.2

.none {
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none
}

DMSmillie · 02-26-2011, 06:44 AM

Hi cybmole

The order in which styles appear in the stylesheet has no effect on how they are applied. They can appear in any order in the stylesheet. When theducks referred to placing "noindent" after "calibre10", he was referring to the order in which those classes are listed in the "class" attribute for "p" elements.

Example

If we have in the stylesheet:

Code:

.noindent {
text-indent: 0;
}
.standardpara {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}

Then, in the HTML code:

Code:

<p class="standardpara noindent">bla bla bla</p>

that says:

First, apply the formatting defined for class "standardpara" to this paragraph.
Next, apply the formatting defined for class "noindent" to this paragraph.

That way, you get all the formatting defined for class "standardpara" (such as the top and bottom margins) except where the formatting defined for class "noindent" specifies something different (the first line indent).

The order in which the styles are listed in the stylesheet has no effect whatsoever, but the order in which the classes are listed in the "class" attribute is important, since they are applied in sequence, from left to right, with each one overriding the one(s) to the left where the same CSS properties are defined in each style involved (in this case, the "text-indent" property). In this example, the result is that this paragraph will have the following formatting applied to it:

margin-top: 1em; (from "standardpara" style)
margin-bottom: 1em; (from "standardpara" style)
text-indent: 0; (from "noindent" style, overriding the text-indent value specified in the "standardpara" style, because "noindent" is listed after "standardpara" in the "class" attribute value list)

This is one way in which styles "cascade" in CSS, meaning that you shouldn't have to define every aspect of the desired formatting in every single style definition, as long as you use the style hierarchy appropriately.

DMSmillie · 02-26-2011, 07:10 AM

Quote:

Originally Posted by cybmole

PS - I found this rule:
"All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions."

Yes, this is how the "cascade" works. However what you're missing is that it only operates amongst those styles that are actually being applied to the HTML element. You gave the following example:

Code:

</head>
<body class="calibre">
<div class="calibre3" id="calibre_pb_0"></div>
<div class="calibre4" id="calibre_pb_1"></div>
<h2 class="calibre5" id="heading_id_6"><span class="none1">Chapter 6.</span>
<br class="calibre6" />
<br class="calibre6" /></h2>
<p class="noindent"><span class="none">   ... text.....</p>

and said:

Quote:

Originally Posted by cybmole

...checked the margin definition in every class referenced above.

I still could only made your technique work by adding an explicit margin-bottom defn to my .noindent class

The reason for that is that the only CSS styles which are being applied to the paragraph in the example above, are the styles defined for the classes "calibre" and "noindent". The style defined for the class "none" is then applied to the (inline) text within the paragraph, but not to the (block) paragraph itself.

"calibre" applies to the BODY element, and all elements contained within it. Since the P element is contained within the BODY element, the style defined for the class "calibre" will apply to the P element.
"calibre3" applies to the first DIV element listed, but that is immediately closed, so the style isn't applied to anything further.
"calibre4" applies to the second DIV element listed, but that too is immediately closed, so this style isn't applied any further, either.
"calibre5" applies to the H2 element and everything it contains, but that element closes before the P element opens, so the style doesn't apply.
"none1" applies to the SPAN element contained within the H2 element, but doesn't apply beyond the end of the SPAN element.
"calibre6" only applies to each of the BR elements contained within the H2 element, and doesn't apply beyond those two elements.
We now get to the P element, which inherits the style defined for the "calibre" class assigned to the BODY element (since the P element is contained within the BODY element). In addition, the P element is given it's own class, "noindent", so the style defined for that class will be applied over the "calibre" style, since the "noindent" style was "defined latest, i.e. written nearest to the actual HTML elements and read by the browser last" and therefore "will over-rule earlier definitions".

Hope that's helped clarify this a bit further.

cybmole · 02-26-2011, 07:29 AM

thanks - it all makes sense now
- I was wrongly replacing .calibreN with my .noindent style but actually I have to append it, like< p class="calibreN noindent" rather than just <p class="noindent".
I should have paid more attention to what theducks ACTUALLY wrote!

& I can put .noindent anywhere in the .css file, so I'll simply add it to top or bottom rather than search for an exact location

DMSmillie · 02-26-2011, 07:47 AM

There are several ways to apply multiple styles to a single element:

1. Enclose the element inside another element. It will inherit the style applied to the element that it's sitting inside, and then its own style will be applied over that.

Example CSS:

Code:

div {
margin-top: 1em;
margin-bottom: 1em;
}
p {
text-indent: 0.3em;
}

Example HTML:

Code:

<div>
<p>bla bla bla</p>
</div>

2. Give the element a class, and define a style for the element type as a whole, and another style for the class. The class style will be applied over the generic element style.

Example CSS:

Code:

p {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}
.noindent {
text-indent: 0;
}

Example HTML:

Code:

<p class="noindent">bla bla bla</p>

3. Give the element more than one class, and define styles for each of these classes. They'll be applied to the element, in the order listed from left to right, each one over-ruling the one(s) before where the same CSS property is defined in each style.

Example CSS:

Code:

.bodytext {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}
.noindent {
text-indent: 0;
}

Example HTML:

Code:

<p class="bodytext noindent">bla bla bla</p>

4. Use any combination of the above, bearing in mind that the order in which each style is applied (enclosing element style, generic "this element" style, specific "class" styles from left to right) will determine which format properties will cascade untouched and which will be replaced by a later, or more specific, style.

DMSmillie · 02-26-2011, 07:56 AM

Quote:

Originally Posted by cybmole

thanks - it all makes sense now
- I was wrongly replacing .calibreN with my .noindent style but actually I have to append it, like< p class="calibreN noindent" rather than just <p class="noindent".
I should have paid more attention to what theducks ACTUALLY wrote!

& I can put .noindent anywhere in the .css file, so I'll simply add it to top or bottom rather than search for an exact location

Yayyy!

Glad I was able to help - I could see some confusion had crept in, but it wasn't until you posted those two posts earlier this morning that it became clear where exactly things had got a bit tangled.

DMSmillie · 02-26-2011, 09:20 AM

Just to add a final note on the whole style hierarchy/cascade thing - there's also a hierarchy in terms of where a style is defined.

There are three main places you can define CSS styles:

1. An external stylesheet (e.g. a file "style.css") referred to in the HEAD section of an HTML file using the LINK element, e.g.:

Code:

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

2. An embedded stylesheet contained in the HEAD section of an HTML file using the STYLE element, e.g.:

Code:

<style type="text/css">
p {
margin-top: 1em;
margin-bottom: 1em;
text-indent: 0.3em;
}
</style>

3. Inline styles applied to individual elements in the HTML code using the STYLE attribute, e.g.:

Code:

<p style="margin-top:1em;margin-bottom:1em;text-indent:0.3em;">bla bla bla</p>

As before, the "closer" it is to the HTML element, the higher a style is in the "hierarchy". So styles defined in an embedded stylesheet overrule styles defined in an external stylesheet, and styles defined in a STYLE attribute for an individual element overrule styles defined in an external stylesheet and/or an embedded stylesheet.

cybmole · 02-26-2011, 09:38 AM

I have a book with has <div rather than <p

I managed to get the noindent trick to work after a few false starts but what are the side effects of coding in <div rather then in < p for each paragraph please ?

should I attempt a drastic replace of div with p ?

Code:

</head>

<body class="calibre5">
  <p class="calibre3"><a class="calibre4" id="c38"></a></p>

  <div class="fmhT calibre11 sgc-1">
    38.
  </div>

  <div class="tx noindent">
    
 <b class="calibre9">H</b>URRY, ” ALEXSAID, avoiding looking at Jax in her half-naked condition. “Hoffmann is probably raising an alarm, getting together help. The last thing we need is to get trapped in here.”
  </div>

  <div class="tx">

UPDate - i thought noindent had worked - then I messed up & started over now it is not working again:

Code:

<h2 class="fmhT calibre11 sgc-1" id="heading_id_2">30</h2>

  <div class="tx noindent">
    <b class="calibre9">A</b>LEX DIDN’T REMEMBER OPENING HIS EYES. He didn’t remember waking. He merely became gradually aware that he was awake. After a fashion.
  </div>

.calibre9 {
font-weight: bolder;text-indent: 0
}
.noindent {text-indent: 0}
.tx {
border-bottom: 0;
border-top: 0;
display: block;
font-size: 0.88889em;
line-height: 1.2;
margin-bottom: 0.3em;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: justify;
text-indent: 1em
}

but when I move the above arrangement & place the .noindent defintion below the .tx definition like below, then it works _ I thought you'd said order did not matter in .css ???
.tx {
border-bottom: 0;
border-top: 0;
display: block;
font-size: 0.88889em;
line-height: 1.2;
margin-bottom: 0.3em;
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
text-align: justify;
text-indent: 1em
}
.noindent {text-indent: 0}

theducks · 02-26-2011, 10:39 AM

Cyb
IMHO the down side is on the Human end

Say you style a <Div> just after the Chapter starting stuff.

45 paragraphs later (you have not closed the <Div>)... What are the style attributes in effect?

BTW I have seen similar to your example CSS many times

I deem it 'messy' (and difficult to clean up). In the <Body> it makes the font Big, then adjusts it for almost every style

IMHO
Body: sets the most used and over all style (size,stroke,face,margins...)
a normal paragraph <P> (naked

) tag should render the paragraph without additions

Now you create classes for the exceptions to the basic <Body>
eg. first paragraph
narrative (probably just italics)
chapter_title (when default H# styling is not enough

)

BTW
HTML has default values built in. You normally do not need to specify them again, unless you are restoring them from a previous change (just more processing that needs to be done by the device

) before they normally expire at tag close.

Note: there are broken implementations on some devices that may need to be worked around. ex. a fractional <hr /> is supposed to center by default: It does not in ADE: you have to force the margin-left to 1/2 the remaining (white space)

Remember those long-reaching Div's? instead of letting the class expire (like the span did), the <div> holds it until it closes. So you set a bigger margin there, now you have override it everywhere else

K.I.S.S.

cybmole · 02-26-2011, 01:11 PM

that's helpful thanks - but can you look again please - at the final part of my previous post - the bit about how changing where I place .noindent in the list of css styles is affecting the outcome. I'd like to know why that is.

DMSmillie · 02-26-2011, 02:02 PM

Quote:

Originally Posted by cybmole

I have a book with has <div rather than <p

I managed to get the noindent trick to work after a few false starts but what are the side effects of coding in <div rather then in < p for each paragraph please ?

For ordinary visual display, shouldn't be any side effects. However for anyone using a full featured screen reader to read out an ebook, semantic coding is really important - using heading elements for headings and titles, coding paragraphs as paragraphs, coding lists as actual lists and not just as paragraphs with a bullet character at the beginning, etc (will also be increasingly important for ordinary TTS users as EPUB viewers incorporate more sophisticated TTS engines). So if these books are just for your own use, using whatever works for you isn't a problem. If they're intended for wider distribution or publication, I'd recommend coding the semantic structure of the content as accurately as possible.

Quote:

Originally Posted by cybmole

...but when I move the above arrangement & place the .noindent defintion below the .tx definition like below, then it works _ I thought you'd said order did not matter in .css ???

It shouldn't (you can always test that by creating a tiny test epub with just a couple of sentences and the two CSS styles, and see if it makes any difference what order the styles are presented in in the stylesheet).

Problem is the file has become such a soup of fragmented and overlapping CSS styles, it's getting harder and harder to untangle it, and presenting more and more opportunities for small errors and typos to screw things up. If it was me, I'd try to get back to a relatively clean version and start over, rather than continuing to try and hack my way through the undergrowth resulting from multiple conversions etc.

theducks · 02-26-2011, 03:47 PM

Quote:

Originally Posted by cybmole

that's helpful thanks - but can you look again please - at the final part of my previous post - the bit about how changing where I place .noindent in the list of css styles is affecting the outcome. I'd like to know why that is.

The question was answered (by others)
The order in the CSS (except for duplicate names) has no bearing on the issue.
The order in the CLASS= statement does.

cybmole · 02-27-2011, 02:03 AM

Quote:

Originally Posted by theducks

The question was answered (by others)
The order in the CSS (except for duplicate names) has no bearing on the issue.
The order in the CLASS= statement does.

but that is simply not the case here - I posted a clear counter example
with this html - class="tx noindent" .....
and
with this order in css:
.noindent
.tx

the noindent did not work

i flip the order within .css to
.tx
.noindent

making NO changes to xhtml and then it did work.

the more detailed post is my last but 2.

as for "file has become such a soup of fragmented and overlapping CSS styles," - it is just your typical everyday calibre conversion!

so , in summary,I am using method 3 of your 4 methods but am finding that css order does matter, at least in this case.

theducks · 02-27-2011, 10:55 AM

The only way I can see that order change within the CSS affecting what you see, was you managed to 'break' "tx", so it was ignored (at least, that is what ADE, does. A PITA to find. one tiny period or semicolon

) when the usage is rendered

(Been there... Many, many times

) Hopefully, in the future, FC will be able to validate the CSS as well.

cybmole · 02-27-2011, 11:34 AM

i can now reproduce this effect in other books

where I have a working 1st para of the form
<p class="normal noindent">blah....

I just have to cut the noindent definition and move it higher in css, so that it is defined before normal is defined. e.g. make it 1st line of css, right after the @namespace line

the noindent property then stops working. ( as viewed in sigil book mode)
I am using this simple 1 line formula .noindent {text-indent: 0}

I hear all that you say about it shouldn't happen, but it does - maybe sigil is written in a slightly non-compliant way ?

please test in sigil.

my EXACT sequence: view a chapter of previously fixed up book ,in book mode - see no indent working ok in para 1 - now go to css, move that noindent definition line up to top of css, to back to previous chapter viewed & switch back to book mode in sigil - voila!

02-26-2011, 05:38 AM	#91
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	PS - I found this rule: "All other things being equal, the styles that are defined latest, i.e. written nearest to the actual HTML elements and read by the browser last, will over-rule earlier definitions." so I traced the sequence: Code: </head> <body class="calibre"> <div class="calibre3" id="calibre_pb_0"></div> <div class="calibre4" id="calibre_pb_1"></div> <h2 class="calibre5" id="heading_id_6"><span class="none1">Chapter 6.</span><br class="calibre6" /> <br class="calibre6" /></h2> <p class="noindent"><span class="none"> ... text..... and checked the margin definition in every class referenced above. I still could only made your technique work by adding an explicit margin-bottom defn to my .noindent class .calibre { display: block; font-size: 1em; line-height: 1.2; margin-bottom: 0; margin-left: 0; margin-right: 5pt; margin-top: 0; padding-left: 0; padding-right: 0; page-break-before: always } .calibre1 { display: table-row; vertical-align: middle } .calibre2 { display: block } .calibre3 { border-bottom: 0; border-top: 0; display: block; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-top: 0; page-break-after: always; text-indent: 1em } .calibre4 { display: block; page-break-after: always } .calibre5 { display: block; font-size: 1.125em; font-weight: bold; line-height: 1.2; margin-bottom: 0.3em; margin-left: 0; margin-right: 0; margin-top: 1em; text-align: center } .calibre6 { display: block; line-height: 1.2 .none { font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none }

02-26-2011, 06:44 AM	#92
DMSmillie Enquiring Mind Posts: 562 Karma: 42350 Join Date: Aug 2010 Location: London, UK Device: Kindle 3 (WiFi)	Hi cybmole The order in which styles appear in the stylesheet has no effect on how they are applied. They can appear in any order in the stylesheet. When theducks referred to placing "noindent" after "calibre10", he was referring to the order in which those classes are listed in the "class" attribute for "p" elements. Example If we have in the stylesheet: Code: .noindent { text-indent: 0; } .standardpara { margin-top: 1em; margin-bottom: 1em; text-indent: 0.3em; } Then, in the HTML code: Code: <p class="standardpara noindent">bla bla bla</p> that says: First, apply the formatting defined for class "standardpara" to this paragraph. Next, apply the formatting defined for class "noindent" to this paragraph. That way, you get all the formatting defined for class "standardpara" (such as the top and bottom margins) except where the formatting defined for class "noindent" specifies something different (the first line indent). The order in which the styles are listed in the stylesheet has no effect whatsoever, but the order in which the classes are listed in the "class" attribute is important, since they are applied in sequence, from left to right, with each one overriding the one(s) to the left where the same CSS properties are defined in each style involved (in this case, the "text-indent" property). In this example, the result is that this paragraph will have the following formatting applied to it: margin-top: 1em; (from "standardpara" style) margin-bottom: 1em; (from "standardpara" style) text-indent: 0; (from "noindent" style, overriding the text-indent value specified in the "standardpara" style, because "noindent" is listed after "standardpara" in the "class" attribute value list) This is one way in which styles "cascade" in CSS, meaning that you shouldn't have to define every aspect of the desired formatting in every single style definition, as long as you use the style hierarchy appropriately.

02-26-2011, 07:47 AM	#95
DMSmillie Enquiring Mind Posts: 562 Karma: 42350 Join Date: Aug 2010 Location: London, UK Device: Kindle 3 (WiFi)	There are several ways to apply multiple styles to a single element: 1. Enclose the element inside another element. It will inherit the style applied to the element that it's sitting inside, and then its own style will be applied over that. Example CSS: Code: div { margin-top: 1em; margin-bottom: 1em; } p { text-indent: 0.3em; } Example HTML: Code: <div> <p>bla bla bla</p> </div> 2. Give the element a class, and define a style for the element type as a whole, and another style for the class. The class style will be applied over the generic element style. Example CSS: Code: p { margin-top: 1em; margin-bottom: 1em; text-indent: 0.3em; } .noindent { text-indent: 0; } Example HTML: Code: <p class="noindent">bla bla bla</p> 3. Give the element more than one class, and define styles for each of these classes. They'll be applied to the element, in the order listed from left to right, each one over-ruling the one(s) before where the same CSS property is defined in each style. Example CSS: Code: .bodytext { margin-top: 1em; margin-bottom: 1em; text-indent: 0.3em; } .noindent { text-indent: 0; } Example HTML: Code: <p class="bodytext noindent">bla bla bla</p> 4. Use any combination of the above, bearing in mind that the order in which each style is applied (enclosing element style, generic "this element" style, specific "class" styles from left to right) will determine which format properties will cascade untouched and which will be replaced by a later, or more specific, style.

02-26-2011, 09:20 AM	#97
DMSmillie Enquiring Mind Posts: 562 Karma: 42350 Join Date: Aug 2010 Location: London, UK Device: Kindle 3 (WiFi)	Just to add a final note on the whole style hierarchy/cascade thing - there's also a hierarchy in terms of where a style is defined. There are three main places you can define CSS styles: 1. An external stylesheet (e.g. a file "style.css") referred to in the HEAD section of an HTML file using the LINK element, e.g.: Code: <link rel="stylesheet" type="text/css" href="../Styles/style.css" /> 2. An embedded stylesheet contained in the HEAD section of an HTML file using the STYLE element, e.g.: Code: <style type="text/css"> p { margin-top: 1em; margin-bottom: 1em; text-indent: 0.3em; } </style> 3. Inline styles applied to individual elements in the HTML code using the STYLE attribute, e.g.: Code: <p style="margin-top:1em;margin-bottom:1em;text-indent:0.3em;">bla bla bla</p> As before, the "closer" it is to the HTML element, the higher a style is in the "hierarchy". So styles defined in an embedded stylesheet overrule styles defined in an external stylesheet, and styles defined in a STYLE attribute for an individual element overrule styles defined in an external stylesheet and/or an embedded stylesheet.

02-26-2011, 09:38 AM	#98
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	I have a book with has <div rather than <p I managed to get the noindent trick to work after a few false starts but what are the side effects of coding in <div rather then in < p for each paragraph please ? should I attempt a drastic replace of div with p ? Code: </head> <body class="calibre5"> <p class="calibre3"><a class="calibre4" id="c38"></a></p> <div class="fmhT calibre11 sgc-1"> 38. </div> <div class="tx noindent"> <b class="calibre9">H</b>URRY, ” ALEXSAID, avoiding looking at Jax in her half-naked condition. “Hoffmann is probably raising an alarm, getting together help. The last thing we need is to get trapped in here.” </div> <div class="tx"> UPDate - i thought noindent had worked - then I messed up & started over now it is not working again: Code: <h2 class="fmhT calibre11 sgc-1" id="heading_id_2">30</h2> <div class="tx noindent"> <b class="calibre9">A</b>LEX DIDN’T REMEMBER OPENING HIS EYES. He didn’t remember waking. He merely became gradually aware that he was awake. After a fashion. </div> .calibre9 { font-weight: bolder;text-indent: 0 } .noindent {text-indent: 0} .tx { border-bottom: 0; border-top: 0; display: block; font-size: 0.88889em; line-height: 1.2; margin-bottom: 0.3em; margin-top: 0; padding-bottom: 0; padding-top: 0; text-align: justify; text-indent: 1em } but when I move the above arrangement & place the .noindent defintion below the .tx definition like below, then it works _ I thought you'd said order did not matter in .css ??? .tx { border-bottom: 0; border-top: 0; display: block; font-size: 0.88889em; line-height: 1.2; margin-bottom: 0.3em; margin-top: 0; padding-bottom: 0; padding-top: 0; text-align: justify; text-indent: 1em } .noindent {text-indent: 0} Last edited by cybmole; 02-26-2011 at 09:55 AM.

02-26-2011, 07:29 AM	#94
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	thanks - it all makes sense now - I was wrongly replacing .calibreN with my .noindent style but actually I have to append it, like< p class="calibreN noindent" rather than just <p class="noindent". I should have paid more attention to what theducks ACTUALLY wrote! & I can put .noindent anywhere in the .css file, so I'll simply add it to top or bottom rather than search for an exact location

02-26-2011, 10:39 AM	#99
theducks Well trained by Cats Posts: 31,048 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Cyb IMHO the down side is on the Human end Say you style a <Div> just after the Chapter starting stuff. 45 paragraphs later (you have not closed the <Div>)... What are the style attributes in effect? BTW I have seen similar to your example CSS many times I deem it 'messy' (and difficult to clean up). In the <Body> it makes the font Big, then adjusts it for almost every style IMHO Body: sets the most used and over all style (size,stroke,face,margins...) a normal paragraph <P> (naked ) tag should render the paragraph without additions Now you create classes for the exceptions to the basic <Body> eg. first paragraph narrative (probably just italics) chapter_title (when default H# styling is not enough ) BTW HTML has default values built in. You normally do not need to specify them again, unless you are restoring them from a previous change (just more processing that needs to be done by the device ) before they normally expire at tag close. Note: there are broken implementations on some devices that may need to be worked around. ex. a fractional <hr /> is supposed to center by default: It does not in ADE: you have to force the margin-left to 1/2 the remaining (white space) Remember those long-reaching Div's? instead of letting the class expire (like the span did), the <div> holds it until it closes. So you set a bigger margin there, now you have override it everywhere else K.I.S.S.

02-26-2011, 01:11 PM	#100
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	that's helpful thanks - but can you look again please - at the final part of my previous post - the bit about how changing where I place .noindent in the list of css styles is affecting the outcome. I'd like to know why that is.

02-27-2011, 10:55 AM	#104
theducks Well trained by Cats Posts: 31,048 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	The only way I can see that order change within the CSS affecting what you see, was you managed to 'break' "tx", so it was ignored (at least, that is what ADE, does. A PITA to find. one tiny period or semicolon ) when the usage is rendered (Been there... Many, many times ) Hopefully, in the future, FC will be able to validate the CSS as well.

02-27-2011, 11:34 AM	#105
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	i can now reproduce this effect in other books where I have a working 1st para of the form <p class="normal noindent">blah.... I just have to cut the noindent definition and move it higher in css, so that it is defined before normal is defined. e.g. make it 1st line of css, right after the @namespace line the noindent property then stops working. ( as viewed in sigil book mode) I am using this simple 1 line formula .noindent {text-indent: 0} I hear all that you say about it shouldn't happen, but it does - maybe sigil is written in a slightly non-compliant way ? please test in sigil. my EXACT sequence: view a chapter of previously fixed up book ,in book mode - see no indent working ok in para 1 - now go to css, move that noindent definition line up to top of css, to back to previous chapter viewed & switch back to book mode in sigil - voila! Last edited by cybmole; 02-27-2011 at 12:21 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Indents! Please Help!	Ephraim	Sigil	8	11-23-2010 03:43 PM
Margins and Indents	sloecoach	Calibre	2	09-26-2010 04:41 PM
Display of Hanging Indents	crutledge	Workshop	1	09-25-2009 06:09 PM
RFE: Remove remove tags in bulk edit	magphil	Calibre	0	08-11-2009 10:37 AM
Hanging indents?	llasram	Kindle Formats	11	01-05-2009 10:59 AM

Advert

Advert