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 11-21-2014, 11:15 PM   #1
rosshalde
Connoisseur
rosshalde began at the beginning.
 
Posts: 81
Karma: 10
Join Date: Jun 2014
Device: nook
appropriate way to insert pics?

I took this from Pablo's "Quick and Dirty Guide".

<div class="ic">
<h3 title="Figure 1"><img alt="" src="../Images/figure_1.jpg" /></h3>
</div>
and CSS
.ic { page-break-inside: avoid; }

My questions are:
1) When I am inserting 100 pics in a book, is it actually necessary to use the <div class="ic">...or can I just define h3 in the CSS at text-align:center and ditch the whole <div>. I am only asking as it will cut down on the copy/paste time if I can leave out two extra lines/picture
2) I don't understand the ".ic" definition. I don't see how it tells the image to be centered. It seems to tell the image and caption to stay together if there is one.
rosshalde is offline   Reply With Quote
Old 11-22-2014, 03:28 AM   #2
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,259
Karma: 4801165
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
In the code you showed, yes, the <div class="ic"> in unnecessary (and page-break-avoid: is often ignored, anyway). And the <h3> is only needed if you want "Figure 1" to appear in the TOC. Basically, you can just use:

Code:
<XXX><img alt="" src="..." /></XXX>
where XXX = div, p, h1-6. If you need to center, remove indent, add margins, etc. use a class in the XXX and define it appropriately.
Jellby is offline   Reply With Quote
Old 11-22-2014, 07:46 AM   #3
rosshalde
Connoisseur
rosshalde began at the beginning.
 
Posts: 81
Karma: 10
Join Date: Jun 2014
Device: nook
ok, so would each of these be acceptable as a representative of

<XXX><img alt="" src="..." /></XXX>

1) <p class="s1"><img alt="" src="..." /></s1> and define in the css

.s1{
text-align:center
}
2) <div class="image"><img alt="" src="..." /></div>
and define in the css
.image{
text-align:center
}

is there a preference for using a <p> style vs <div> style. Will there ever be a difference on how these are displayed? Even though it is an image, is "text-align:center" the best way to go? I saw someone else doing something like
margin-left:auto
margin-right:auto in the css. Is there anything better or worse about either option? Is there a preferred option?
I really appreciate your help in clearing this up. I am brand new at this and have been going through some tutorials over at W3, but it is helpful to be able to ask questions like these.
rosshalde is offline   Reply With Quote
Old 11-22-2014, 08:19 AM   #4
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,259
Karma: 4801165
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
The difference between <p> and <div> depends on the rest of the stylesheet and the default styles applied by the reader. Usually, <p> will have some default margins and/or indent, while <div> is a "virgin" element. By default, I would prefer <div>, and, to be specific use "div.image" in the CSS rather than just ".image".

"text-align" simply defines the alignment of the content, whatever it is.

"auto" margins can be used for different purposes (centering a table, usually), but they are not guaranteed to work (the spec allows ignoring them, and many readers do).
Jellby is offline   Reply With Quote
Old 11-22-2014, 08:51 AM   #5
rosshalde
Connoisseur
rosshalde began at the beginning.
 
Posts: 81
Karma: 10
Join Date: Jun 2014
Device: nook
so this is the preferred way of doing it?
<div class="image"><img alt="" src="..." /></div>
and define in the css
div.image{
text-align:center;
}

also, in Sigil, it suggest the following as a way to get your picture to be in the TOC
<h1 title="CHAPTER 1"><img src="../Images/myimage.png" /></h1>
When it comes to <h>, can you have a "class" like with <div>? Is title a "class"? If not, what is "title" in html terms?
would i just define in the css
h1{
text-align:center;
}
rosshalde is offline   Reply With Quote
Old 11-22-2014, 09:57 AM   #6
odedta
Addict
odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.odedta knows how to set a laser printer to stun.
 
Posts: 293
Karma: 95952
Join Date: Dec 2013
Device: iPad
I can't think of any reason why you want to put an image in a heading tag.
odedta is offline   Reply With Quote
Old 11-22-2014, 11:46 AM   #7
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,259
Karma: 4801165
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
"title" is not a class, it is an attribute. In normal HTML it could, for instance, be displayed as a tooltip when you hover the mouse on the element. In ebook readers it will probably have no effect at all, but Sigil uses it to create the TOC (it cannot put an image in the TOC, but it will put whatever you write in the "title" attribute

Quote:
Originally Posted by odedta View Post
I can't think of any reason why you want to put an image in a heading tag.
The simplest one: when you want to have the chapter title embedded in some illustration or decorative ornament.
Jellby is offline   Reply With Quote
Old 11-22-2014, 11:29 PM   #8
rosshalde
Connoisseur
rosshalde began at the beginning.
 
Posts: 81
Karma: 10
Join Date: Jun 2014
Device: nook
so, a class is completely made up?
meaning I could say
<p class="donkey"
and have
.donkey{
xxx
}
in the css?
but there are only certain attributes (they are given, not able to be made up)?
And when you style something...you can style both a class and an attribute? or just a class?

Last edited by rosshalde; 11-22-2014 at 11:34 PM.
rosshalde is offline   Reply With Quote
Old 11-23-2014, 03:18 AM   #9
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,101
Karma: 5861069
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
You use classes to identify parts of your HTML to which attributes need to be applied. Then in your stylesheet you define the classes. There is where you determine which attributes will be applied. There are a lot of different attributes. Be aware that ePUB2 uses CSS 2.0.1, so that determined which attributes could be used. Even then not all attributes will work though, some of them make no sense in eBooks and some of them will be ignored by readers. It is a fixed list though. For the complete specs, see: http://www.w3.org/TR/CSS21/
Toxaris is offline   Reply With Quote
Old 11-23-2014, 05:58 AM   #10
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,259
Karma: 4801165
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by rosshalde View Post
so, a class is completely made up? but there are only certain attributes (they are given, not able to be made up)?
Exactly. And "class" is an attribute, with which you assign a class to an element.

Quote:
And when you style something...you can style both a class and an attribute? or just a class?
Just a class, although with CSS you can use attributes in a selector, so that a particular styling affects elements with or without it. The syntax div.myclass in the CSS means any <div> tag with class="myclass". Other attributes are selected with a different syntax.

Quote:
Originally Posted by Toxaris View Post
You use classes to identify parts of your HTML to which attributes need to be applied.
I think you are mixing terminology, which may confuse rosshalde. Let's call "attributes" the stuff in HTML. The stuff in CSS, to which you refer shall be called "properties" (what's inside the braces, such as "text-align"), or "selectors" (outside the braces, like "div.myclass").
Jellby is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Insert cover? PalPam Sigil 7 09-05-2013 12:07 PM
Can't insert SD card channelswimmer Barnes & Noble NOOK 1 07-08-2013 04:50 PM
0.6 best way to insert hyperlinks?? phossler Sigil 16 11-21-2012 10:36 AM
Hi, I am new here, Who can tell me how to insert my signature? yakest Introduce Yourself 1 06-23-2011 01:12 AM
Metadata insert Bluebaize Calibre 4 06-22-2011 07:51 PM


All times are GMT -4. The time now is 12:37 PM.


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