View Full Version : how to modify style of specific p classes?


clemens14
09-18-2011, 05:12 AM
Hello,

I have a folder with some html files (actually saved as txt, but I guess it doesn't matter) for the various chapters of a Sanskrit book.
Each of these files has many subchapters, actually verses, and each of them has various sections, namely the original text, its transliterations, word for word translation, translation and purport, etc.

In the tagged html text the sections are defined by p classes
An actual example from chapter 10 verse 8


<p class="chapnum">CHAPTER TEN</p><a name="8"></a>
<p class="VerseNumberHeading">Bg10.8</p>
<p class="Textnum">TEXT 8</p>
<p class="VerseText">...</p>
<p class="SynonymsSA"><i>...</i></p>
<p class="Titles">TRANSLATION</p>
<p class="Bold">...</p>
<p class="Titles">PURPORT</p>


I am a beginner in epub construction and I am using Sigil to make the actual epub. The problem is that , although Sigil does a great job at making the epub, it obviously considers all the paragraph classes as part of the paragraph, and thus does not include them in the style sheet.
I would like to be able modify the appearance of the above mentioned parts by adding space before or after, increasing fonts etc. because they are all lumped together.
What should I do?
How do I add them to the stylesheet?

LaoTseu
09-18-2011, 09:20 AM
Quite easily. The syntax for classes in the stylesheet is .class_name or element.class_name.

Here are two ways to do it.

First, just using class names:
.chapnum {
/* put your own styles here */
font-size: 1.125em;
font-weight: bold;
margin-bottom: 2em;
margin-left: 0;
margin-right: 5%;
margin-top: 10%;
text-align: center;
text-indent: 0;
}

.VerseNumberHeading {
margin-bottom: 0;
margin-top: 0;
text-align: left;
text-indent: 1em;
}

By using class name this way, you can reuse the class in different element. You could do <h1 class="chapnum "> for example and the style would apply.

Second examples:

p.chapnum {
/* put your own styles here */
font-size: 1.125em;
font-weight: bold;
margin-bottom: 2em;
margin-left: 0;
margin-right: 5%;
margin-top: 10%;
text-align: center;
text-indent: 0;
}

p.VerseNumberHeading {
margin-bottom: 0;
margin-top: 0;
text-align: left;
text-indent: 1em;
}

Here, the styles will be applied only to the <p class="chapnum "> and not to say <h1 class="chapnum ">.

Here's a reference to style sheet selector syntax (http://www.w3schools.com/cssref/css_selectors.asp) if you want to know the whole story ;-).

Note 1: make sure you have a link to your stylesheet in the <head> section of your html page.

Note 2: the example you are giving would benefit from a header tag I think. When I see things like <p class="chapnum">CHAPTER TEN</p>, I'm thinking that it should have been <h1>CHAPTER TEN</h1> instead.

Hope that helps.

clemens14
09-19-2011, 02:44 PM
Thank you very much.
Your reply was straight to the point, very clear to understand and the link is very useful as well. The advice to change the p class to an actual header is very good. Do you by chance know if there is some way to do it automatically (that is, not one by one, by hand, but through some software or script)?
All the best,

Clemens

LaoTseu
09-19-2011, 07:20 PM
If you use Sigil (http://code.google.com/p/sigil/), you can use Regular Expression search and replace.

The regular expression would be:

Search for <p class="chapnum">(.*)</p>
Replace with <h1>\1</h1>

Be sure to select minimal match and do the replace in all html files.

You probably also want to create a style for you header to have it look the way you want. Something like

h1 {
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
margin-top: 10%;
text-align: center;
text-indent: 0;
}

There is a whole thread on this forum about Sigil so if you have specific questions about using the software, you can ask there.

Best

clemens14
11-02-2011, 06:00 AM
Thanks, it worked great!
And please excuse me for this very late reply.

JSWolf
11-14-2011, 07:24 PM
If you use Sigil (http://code.google.com/p/sigil/), you can use Regular Expression search and replace.

The regular expression would be:

Search for <p class="chapnum">(.*)</p>
Replace with <h1>\1</h1>

Be sure to select minimal match and do the replace in all html files.

You probably also want to create a style for you header to have it look the way you want. Something like

h1 {
margin-bottom: 2em;
margin-left: 0;
margin-right: 0;
margin-top: 10%;
text-align: center;
text-indent: 0;
}

There is a whole thread on this forum about Sigil so if you have specific questions about using the software, you can ask there.

Best

IMHO, chapter titles are best in h2.

h2 {
margin-bottom: 25px;
margin-left: 0;
margin-right: 0;
margin-top: 25px;
text-align: center;
text-indent: 0;
}

ghostyjack
11-16-2011, 10:19 AM
IMHO, chapter titles are best in h2.

What's the benefit of using h2 over h1?

I've always assumed this was just down to personal preference. I normally use h2 as the top-most section level in a book and then h3 and downwards for sub-sections.

e.g.
<h2>Part X</h2>
<h3>Chapter Y</h3>

or if no parts, then:
<h2>Chapter Y</h2>

I never use h1 unless it is an omnibus edtion of multiple books and then h1 will be used for the book title.

Jellby
11-16-2011, 10:42 AM
I use <h1> for chapters. If there are parts or books, I use <h1 class="part"> or <h1 class="book">. For the title page I use specific formatting with no <hX> tags.

If I used some automatic tool like Sigil to build the NCX, for example, I'd probably use <h1> for the top level and then <h2>, <h3>... But since I don't, I just use <h1> for chapters because each chapter is in its own XHTML file, and there it is the top division.

DiapDealer
11-16-2011, 10:54 AM
I've always assumed this was just down to personal preference.
It IS just a personal preference. The use of Sigil in creating epubs has inculcated an "h tags for sections/chapters/etc" mentality because for a long time, that was the only/easiest way to get a working ToC with that program. Now Sigil allows you to build your ToC from scratch if you so choose. I rarely use any h tags at all in my epubs anymore.

The reason? <h> tags in epubs that are converted to mobi always result in a page-break. I don't always want a page-break where I use header-type text in my books.

JSWolf
11-27-2011, 10:05 AM
The reason? <h> tags in epubs that are converted to mobi always result in a page-break. I don't always want a page-break where I use header-type text in my books.

Even Calibre converted ePub > mobi?

dwig
11-27-2011, 05:21 PM
Even Calibre converted ePub > mobi?

By default, yes. You can, though, make changes in calibre's conversion settings to avoid inserting page breaks for specific H tags or all H tags.

Its my habit to use H1 for book titles, H2 for part/section headings and H3 for chapter titles/numbers. I avoid H tags for any other purely cosmetic use. If I want larger and/or bolder text (e.g. author's name on titlepage, ...) I use CSS classes.