how to modify style of specific p classes?

clemens14 · 09-18-2011, 04: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

Code:

<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, 08: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:

Code:

.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:

Code:

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 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, 01: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, 06:20 PM

If you use 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

Code:

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, 05:00 AM

Thanks, it worked great!
And please excuse me for this very late reply.

JSWolf · 11-14-2011, 06:24 PM

Quote:

Originally Posted by LaoTseu

If you use 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

Code:

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.

Code:

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

ghostyjack · 11-16-2011, 09:19 AM

Quote:

Originally Posted by JSWolf

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, 09: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, 09:54 AM

Quote:

Originally Posted by ghostyjack

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, 09:05 AM

Quote:

Originally Posted by DiapDealer

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, 04:21 PM

Quote:

Originally Posted by JSWolf

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.

09-18-2011, 04:12 AM	#1
clemens14 Enthusiast Posts: 26 Karma: 10 Join Date: Jul 2010 Device: none	how to modify style of specific p classes? 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 Code: <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?

09-18-2011, 08:20 AM	#2
LaoTseu Member Posts: 20 Karma: 12 Join Date: Sep 2011 Device: Kindke	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: Code: .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: Code: 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 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. Last edited by LaoTseu; 09-18-2011 at 10:12 PM.

09-19-2011, 06:20 PM	#4
LaoTseu Member Posts: 20 Karma: 12 Join Date: Sep 2011 Device: Kindke	If you use 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 Code: 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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Applying multiple classes to an element	Hatgirl	Kindle Formats	11	04-06-2011 02:53 PM
Classes in CSS in recipes?	Tegan	Recipes	10	01-17-2011 07:30 PM
Can I modify the dictionary?	youngsmoke	Fictionwise eBookwise	0	11-30-2010 04:48 PM
Mobi TOC style vs ePub style?	phearlez	Kindle Formats	3	04-11-2010 06:35 AM
iLiad How to modify /etc/er_registry.txt in style	scotty1024	iRex Developer's Corner	5	11-08-2006 07:01 PM

09-19-2011, 01:44 PM	#3
clemens14 Enthusiast Posts: 26 Karma: 10 Join Date: Jul 2010 Device: none	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

11-02-2011, 05:00 AM	#5
clemens14 Enthusiast Posts: 26 Karma: 10 Join Date: Jul 2010 Device: none	Thanks, it worked great! And please excuse me for this very late reply.

11-16-2011, 09:42 AM	#8
Jellby frumious Bandersnatch Posts: 7,548 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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.

Advert

Advert