Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-18-2011, 05:12 AM   #1
clemens14
Enthusiast
clemens14 began at the beginning.
 
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?
clemens14 is offline   Reply With Quote
Old 09-18-2011, 09:20 AM   #2
LaoTseu
Member
LaoTseu began at the beginning.
 
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 11:12 PM.
LaoTseu is offline   Reply With Quote
 
Advertisement
Old 09-19-2011, 02:44 PM   #3
clemens14
Enthusiast
clemens14 began at the beginning.
 
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
clemens14 is offline   Reply With Quote
Old 09-19-2011, 07:20 PM   #4
LaoTseu
Member
LaoTseu began at the beginning.
 
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
LaoTseu is offline   Reply With Quote
Old 11-02-2011, 06:00 AM   #5
clemens14
Enthusiast
clemens14 began at the beginning.
 
Posts: 26
Karma: 10
Join Date: Jul 2010
Device: none
Thanks, it worked great!
And please excuse me for this very late reply.
clemens14 is offline   Reply With Quote
Old 11-14-2011, 07:24 PM   #6
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 45,349
Karma: 32433456
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by LaoTseu View Post
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;
}
JSWolf is offline   Reply With Quote
Old 11-16-2011, 10:19 AM   #7
ghostyjack
Guru
ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.ghostyjack ought to be getting tired of karma fortunes by now.
 
ghostyjack's Avatar
 
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
Quote:
Originally Posted by JSWolf View Post
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.
ghostyjack is offline   Reply With Quote
Old 11-16-2011, 10:42 AM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,997
Karma: 8796439
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.
Jellby is offline   Reply With Quote
Old 11-16-2011, 10:54 AM   #9
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 14,776
Karma: 81353584
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
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.

Last edited by DiapDealer; 11-16-2011 at 10:57 AM.
DiapDealer is offline   Reply With Quote
Old 11-27-2011, 10:05 AM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 45,349
Karma: 32433456
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
Quote:
Originally Posted by DiapDealer View Post
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?
JSWolf is offline   Reply With Quote
Old 11-27-2011, 05:21 PM   #11
dwig
Wizard
dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.
 
dwig's Avatar
 
Posts: 1,231
Karma: 2230000
Join Date: Dec 2004
Location: Paradise (Key West, FL)
Device: Current:Dell Venue 8 Pro - Retired:Kindle 3, Clie UX50, T415, ...
Quote:
Originally Posted by JSWolf View Post
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.

Last edited by dwig; 11-27-2011 at 05:24 PM.
dwig is online now   Reply With Quote
Reply

Tags
class, css, p class, paragraph, sigil

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 06:27 PM.


MobileRead.com is a privately owned, operated and funded community.