Paragraphs and indent - Page 2

Amalthia · 12-26-2008, 06:25 PM

Quote:

Originally Posted by mrmikel

You may well already know about this, but I thought I would mention it anyway:

http://www.w3schools.com/css/default.asp

They have examples for all the elements of CSS...some are only useful for web pages, but it gives you some more commands to get things the way you want.

Mike

Thanks so much for sharing this link!

It helps explain things very clearly.

Amalthia · 01-09-2009, 03:53 PM

I had a question.

I used this code.

<head>
<style type="text/css">
.toc {text-indent: 0in; page-break-after:always}
</style>

</head>

and added <span class="toc"> </span> to my Table of Contents.

It worked.

However when I tried the same thing on another section of the document it didn't work. The first line was indented. Is this something you can only use once in a document? Or do I need to make another class for my story title, author, summary, and author note section?

llasram · 01-09-2009, 04:20 PM

Quote:

Originally Posted by Amalthia

and added <span class="toc"> </span> to my Table of Contents.

Well, <span/> is an inline element. Try using <div/> tags instead and/or include an explicit 'display: block' in your CSS property list.

Amalthia · 01-09-2009, 05:21 PM

Quote:

Originally Posted by llasram

Well, <span/> is an inline element. Try using <div/> tags instead and/or include an explicit 'display: block' in your CSS property list.

I don't suppose you can share the code? I don't really get what you mean? Though I understand what you mean about using the <div> tag instead. Though I'm not sure what the difference is between span and div.

llasram · 01-09-2009, 05:52 PM

Quote:

Originally Posted by Amalthia

I don't suppose you can share the code? I don't really get what you mean? Though I understand what you mean about using the <div> tag instead. Though I'm not sure what the difference is between span and div.

Ok, hmm. So the most basic distinction in the CSS rendering model is between "block-level" and "inline-level" elements. Every open-close tag pair creates an "element" in the document tree. Every element in the tree creates a "box" in the display-model which contains the element's content. Boxes which are "block-level" create "blocks" in the display model -- paragraphs, etc which stack vertically on the page. Boxes which are "inline-level" are placed within blocks and flow one after another horizontally, but wrapping if necessary. So for example if you had an infinitely wide "page" with only inline-level elements, everything would render in one line.

The only difference between the <span/> and <div/> tags is that by default the <span/> tag creates an inline-level element while the <div/> tag creates a block-level element. This matters because certain properties -- like 'text-indent' -- apply only to block-level elements. If you want your specified 'text-indent' to be applied consistently, you have to make sure the element with that property is a block-level element. The two basic ways to do that are to use tags which create block-level elements by default (like <div/>) or specify a CSS property which causes the element to become block-level -- the most basic one being to set 'display' to 'block'.

Make sense?

Amalthia · 01-09-2009, 06:07 PM

Quote:

Originally Posted by llasram

Ok, hmm. So the most basic distinction in the CSS rendering model is between "block-level" and "inline-level" elements. Every open-close tag pair creates an "element" in the document tree. Every element in the tree creates a "box" in the display-model which contains the element's content. Boxes which are "block-level" create "blocks" in the display model -- paragraphs, etc which stack vertically on the page. Boxes which are "inline-level" are placed within blocks and flow one after another horizontally, but wrapping if necessary. So for example if you had an infinitely wide "page" with only inline-level elements, everything would render in one line.

The only difference between the <span/> and <div/> tags is that by default the <span/> tag creates an inline-level element while the <div/> tag creates a block-level element. This matters because certain properties -- like 'text-indent' -- apply only to block-level elements. If you want your specified 'text-indent' to be applied consistently, you have to make sure the element with that property is a block-level element. The two basic ways to do that are to use tags which create block-level elements by default (like <div/>) or specify a CSS property which causes the element to become block-level -- the most basic one being to set 'display' to 'block'.

Make sense?

This makes a lot of sense and one of the best explanations I've run across. thank so you so much for taking the time to break it down and explaining in a way I could understand.

Amalthia · 01-09-2009, 06:11 PM

so would this by how the display:block should look in my header information?

<head>
<style type="text/css">
.toc {text-indent: 0in; page-break-after:always}
display:block
</style>

</head>

Or is the display:block added like {display:block; text-indent: 0in; page-break-after:always}

Sorry if this is an incredibly dumb question. I goggled this but no one is saying where this goes in the code?

llasram · 01-09-2009, 06:26 PM

Quote:

Originally Posted by Amalthia

Or is the display:block added like {display:block; text-indent: 0in; page-break-after:always}

Yep, that one's right. The basic CSS syntax is:

Code:

SELECTOR { PROPERTIES }

The SELECTOR specifies what elements the list of PROPERTIES applies to. So in your case you have ".toc". The "." is the "class selector," which means "any elements with a 'class' attribute of what follows". The PROPERTIES are all of the form:

Code:

PROPERTY: VALUE;

But you can have any amount of whitespace (spaces and new lines) between any of the elements, as long as everything is in the right order. So you can have e.g.:

Code:

.toc {
  display:block;
  text-indent: 0in;
  page-break-after:always;
}

as long as the opening curly-brace is between the selector and the properties and the closing curly-brace is after all the properties. (The semicolon after the last property in the list is technically optional, but it doesn't hurt to have it.)

So that will make any element with a 'class' attribute of 'toc' become a block element which doesn't indent anything within the element, and has a page break after the end of the element.

Amalthia · 01-09-2009, 06:51 PM

Quote:

So that will make any element with a 'class' attribute of 'toc' become a block element which doesn't indent anything within the element, and has a page break after the end of the element.

Will I still need to use <div> or should I continue to use <span> I'm assuming the <span> tag should work now.

Again thank you so much for your help and I think I'm gaining a better understanding of how this works. At this point I'm hoping this css code will help save me a lot of time on preparing my html docs for conversion to LRF.

llasram · 01-09-2009, 07:28 PM

Quote:

Originally Posted by Amalthia

Will I still need to use <div> or should I continue to use <span> I'm assuming the <span> tag should work now.

It's your call -- the <span/> tag with 'display: block' will work just fine formatting-wise, but it makes your markup clearer if you use <div/>. For example, you could use CSS to make <h1/> tags act like <p/> and use <h1/> instead of <p/> everywhere, but that would be really confusing. Using a <span/> with 'display: block' where a <div/> will do is the same thing, only not nearly as bad.

Quote:

Originally Posted by Amalthia

Again thank you so much for your help and I think I'm gaining a better understanding of how this works.

Glad to help!

Quote:

Originally Posted by Amalthia

At this point I'm hoping this css code will help save me a lot of time on preparing my html docs for conversion to LRF.

May I ask why you're creating LRFs instead of EPUBs? With the sole exception of justified text, you should get much better results on the Sony Reader using EPUB.

Amalthia · 01-09-2009, 08:10 PM

Quote:

Originally Posted by llasram

It's your call -- the <span/> tag with 'display: block' will work just fine formatting-wise, but it makes your markup clearer if you use <div/>. For example, you could use CSS to make <h1/> tags act like <p/> and use <h1/> instead of <p/> everywhere, but that would be really confusing. Using a <span/> with 'display: block' where a <div/> will do is the same thing, only not nearly as bad.

Glad to help!

May I ask why you're creating LRFs instead of EPUBs? With the sole exception of justified text, you should get much better results on the Sony Reader using EPUB.

I don't know how to get epub to display my documents the way they come out in LRF.

I uploaded a few html files but it's really hit or miss on what happens to it and I'm still unsure about css.

Right now with my current settings my files come out Times New Roman, size 12 font, margins just the way I like and all the paragraphs are indented.

Plus I keep reading something about page breaks? I have some LRF files that come out to 6000 pages which is what I want.

and just to be clear on the previous topic I need to type in <div class="toc"> </div> in order for my stylesheet to work properly every time I use it?

llasram · 01-09-2009, 08:33 PM

Quote:

Originally Posted by Amalthia

I don't know how to get epub to display my documents the way they come out in LRF.

I uploaded a few html files but it's really hit or miss on what happens to it and I'm still unsure about css.

It's kind of strange that it's "hit or miss"... EPUB content is HTML and CSS, so whatever you HTML and CSS you create is exactly what a EPUB renderer will render. With LRF your content first has to go through a conversion which will be more or less faithful depending upon the quality of the converter and the complexity of your formatting.

Quote:

Originally Posted by Amalthia

Right now with my current settings my files come out Times New Roman, size 12 font, margins just the way I like and all the paragraphs are indented.

The Reader's default font size for EPUB books on the 'M' zoom is 12 points. If your CSS includes 'p { margin: 0; text-indent: 1em; }' you'll get paragraphs with book-like paragraph indents and no extra margins. For the page margins, assuming you're using Calibre, you just need to set up your conversion options to what you want.

Quote:

Originally Posted by Amalthia

Plus I keep reading something about page breaks? I have some LRF files that come out to 6000 pages which is what I want.

If you're using Calibre then it'll deal with the limitation (no content stream over 300k) for you automatically.

Quote:

Originally Posted by Amalthia

and just to be clear on the previous topic I need to type in <div class="toc"> </div> in order for my stylesheet to work properly every time I use it?

If you have the CSS we discussed, either '<div class="toc"> </div>' or '<span class="toc"> </span>' will work, just '<div class="toc"> </div>' is better from a "markup aesthetics" standpoint. Just put the text you want to have no indent within the <div/> or <span/> element and you're good to go!

Amalthia · 01-09-2009, 08:51 PM

Quote:

Originally Posted by llasram

It's kind of strange that it's "hit or miss"... EPUB content is HTML and CSS, so whatever you HTML and CSS you create is exactly what a EPUB renderer will render. With LRF your content first has to go through a conversion which will be more or less faithful depending upon the quality of the converter and the complexity of your formatting.

If you have the CSS we discussed, either '<div class="toc"> </div>' or '<span class="toc"> </span>' will work, just '<div class="toc"> </div>' is better from a "markup aesthetics" standpoint. Just put the text you want to have no indent within the <div/> or <span/> element and you're good to go!

So far I've been using Microsoft Word 97 to convert my RTF files to HTML because I can read the code more easily in that program. I'm mostly using 1997 level of html for my html documents when they are loaded into epub. I'm going to have to experiment more before I switch over and lately I just haven't had the time.

Though I am tempted to figure it out sooner rather than later since I found out that LRF files can cause my reader to crash/reboot...which is highly annoying. And also with any hope ePub will be added to more e-ink devices in the future...

but if I have to do substantial changes to my html files that would be a real hassle.

I think I'll have to adjust the font size myself because I like to be able to read the text big and clearly without having to magnify.

So do you think the stylesheet built into my html docs will convert over to ePub? I wasn't sure if Calibre overwrote what was written in the document? or maybe I should create an external stylesheet to link to?

but really the biggest obstacle to me switching over to ePub has more to do wtih lack of time to experiment with settings and find the one that I like best.

though I get the feeling the more I know about css the more control I'll have over presentation on my converted files.

Again, I can't thank you enough you've been very patient.

Amalthia · 01-10-2009, 03:43 AM

I tested the new code and it didn't work.

Here is what I have in the header.

Quote:

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>Leah & Springwoof Collection</TITLE>
<style type="text/css">
.toc {
display:block;
text-indent: 0in;
page-break-after:always
}
</style>
</HEAD>

And this is what I have later on in the file...

Quote:

<P style="page-break-after:always"> </P>

<div class="toc">
<B><FONT SIZE=4><P><A NAME="_Toc216008866">Balcony Sessions</A></P>
</B></FONT>
<P>by Leah</P>

<B><P>Summary:</B> My take on the aftermath of "38 Minutes": Not everyone is born a hero.<BR>
<B>Pairings:</B> McKay/Sheppard </P>
<B><P>Genres:</B> Angst, Character Study, Episode Related, Pre-slash, Series<BR>
<B>Completed:</B> Yes</P>
<B><P>Word count:</B> 60839 </P>
<B><P>Published:</B> 07 Nov 2004 </P>

<P> </P>
<B><FONT FACE="Arial,Arial" SIZE=4><P>Being Brave </P>
</B></FONT><P> </P>
<P>Author's Notes: None, except that this is my very first fic in any other fandom after "Star Trek: Enterprise," so I'm a little anxious about it. I hope you enjoy it.
</div>

I created an LRF file from the html and all the <P> indented.

I would really appreciate a fresh pair of eyes that could hopefully point out what I'm doing wrong.

I'd appreciate any and all help,
Amalthia

P.S. I'm going to bed now...so I'm not ignoring on purpose.

llasram · 01-10-2009, 08:59 AM

Quote:

Originally Posted by Amalthia

I would really appreciate a fresh pair of eyes that could hopefully point out what I'm doing wrong.

Oh, I misunderstood what you were trying to do. Change your CSS selector from ".toc" to ".toc p". That makes it mean "all <p/> elements inside of an element with a class attribute of 'toc'."

So with CSS of:

Code:

.toc p {
display: block;
text-indent: 0in;
page-break-after: always
}

You will hopefully have what you're looking for.

01-09-2009, 06:11 PM	#22
Amalthia Wizard Posts: 1,159 Karma: 32196 Join Date: Jan 2007 Location: Anchorage, AK Device: Sony Reader PRS-505, PRS-650, PRS-T3, Pocketbook HD2	P.S. so would this by how the display:block should look in my header information? <head> <style type="text/css"> .toc {text-indent: 0in; page-break-after:always} display:block </style> </head> Or is the display:block added like {display:block; text-indent: 0in; page-break-after:always} Sorry if this is an incredibly dumb question. I goggled this but no one is saying where this goes in the code?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ligatures and indent questions	speakingtohe	Calibre	2	08-23-2010 07:33 PM
Paragraph indent-size should not applied to centered paragraphs?	ShellShock	Calibre	3	01-16-2010 11:54 AM
removing spacing between paragraphs WITHOUT touching indent?	ferossan	Calibre	2	12-24-2009 02:12 PM
Can't have hanging indent in Mobi	Yo_E_C	Introduce Yourself	2	08-21-2009 08:51 PM
Plucker: Can I indent paragraphs?	alexdouglas	Reading and Management	3	08-07-2006 05:58 PM

01-09-2009, 03:53 PM	#17
Amalthia Wizard Posts: 1,159 Karma: 32196 Join Date: Jan 2007 Location: Anchorage, AK Device: Sony Reader PRS-505, PRS-650, PRS-T3, Pocketbook HD2	I had a question. I used this code. <head> <style type="text/css"> .toc {text-indent: 0in; page-break-after:always} </style> </head> and added <span class="toc"> </span> to my Table of Contents. It worked. However when I tried the same thing on another section of the document it didn't work. The first line was indented. Is this something you can only use once in a document? Or do I need to make another class for my story title, author, summary, and author note section?

Advert

Advert