Utter CSS noob looking to get started

MacEachaidh · 07-02-2010, 01:22 AM

Hi folks,
New to formatting ePubs, new to Sigil, and new to HTML.

I gather I really need to understand at least basic HTML and CSS to be able to use Sigil. I don't, currently. I sub-edit and do desktop layout for a living, so a lot of the concepts aren't unfamiliar to me; I just don't know the language and parameters of the code.

I've started with a few trial layouts, sticking largely with what I know -- using Adobe InDesign to lie out the text, exporting it as an ePub (InDesign has that ability as a feature). I'd like to bring the ePub into Sigil to create ToCs and break into chapters (which is a bit laborious in InDesign), but I need to be able to work out what I need to change, and what I need to change it to. And of course to edit and correct files that I don't have the source documents for, or exports out of Calibre. My attempts at working out the code have, to date, been a bit laughable.

Can anyone suggest a good place to start learning basic CSS, enough at least to get Sigil working?

Many thanks.

capidamonte · 07-02-2010, 02:59 AM

Sigil edits as WYSIWYG in Book View -- you can certainly use that at this stage, and you can look at Code View to see what it does when you make a change in Book View.

As for (X)HTML and CSS, try w3schools -- that's where I started, and while I'm no master, I do okay.

MacEachaidh · 07-02-2010, 03:10 AM

G'day cap,
Thanks for the reply.

I understand what you're saying. Some of the features I've managed to change in Book View, like applying attributes to selected text. But others - like getting rid of that benighted blank space between paragraphs that a lot of public-domain ePubs seem to have - you can't change in the WYSIWYG interface. (I tried to follow the instructions in the Sigil on-line manual page, but it seemed to make no difference at all to the files I tried it on. Sigil just laughed at me, and went on displaying them, even when I restarted the app and reloaded the files. I clearly need to alter the code, but I don't understand where or what syntax to use.)

I'll try the link you gave, and see how I do. Thanks again.

capidamonte · 07-02-2010, 04:59 AM

It could be a lot of things, from how Sigil displays it, how the reading system you're using displays it, to what the structural markup is or what the CSS has to say about the structural markup.

You're definitely going to have to understand (X)HTML and CSS. Fortunately, it only seems complicated until you get how they relate to each other -- which doesn't take long to figure out.

You'll be fixin' 'em in no time.

Vintage Season · 07-02-2010, 12:38 PM

MacEachaidh, switch to "Code View" and check something, please. (You can get to "Code View" in Sigil by pressing F11, or using the View > Code View drop-down menu, or pressing the button that has the "< >" graphic.) If the troublesome paragraphs are enclosed in <p> and </p> tags, try adding this snippet between the <head> and </head> tags:

Code:

<style type="text/css">
p { border: 0px; padding: 0px; margin: 0 0 0 0; text-indent: 1em }
</style>

On the other hand, if the troublesome paragraphs are separated by <br /> tags, just remove them.

If neither of those approaches fix the issue, you may have some overriding CSS already embedded within your document.

- M.

MacEachaidh · 07-02-2010, 12:59 PM

G'day VS,
Thanks so much for these suggestions. It didn't work, so I need to look as the CSS, I guess. I wonder if you can see anything here?

The code in the CSS says:

Quote:

@namespace h "http://www.w3.org/1999/xhtml";
.MsoPlainText {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: justify;
text-indent: 0
}
.Section {
display: block
}
.calibre {
display: block;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
page-break-before: always;
text-align: justify
}
a {
color: inherit;
text-decoration: inherit;
cursor: default
}
a[href] {
color: blue;
text-decoration: underline;
cursor: pointer
}

and at the top of the document, there's this:

Quote:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="Word.Document" name="ProgId" />
<meta content="Microsoft Word 10" name="Generator" />
<meta content="Microsoft Word 10" name="Originator" />

<title>TheLost</title>
<link rel="stylesheet" href="../Styles/stylesheet.css" type="text/css" />

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }
p.sgc-1 {font-weight: bold}

p { border: 0px; padding: 0px; margin: 0 0 0 0; text-indent: 1em }
</style>
</head>

<body class="calibre">
<div class="Section">
<p class="MsoPlainText"></p>

Does anything perhaps leap out as an obvious source?

Thanks for any suggestions.

Vintage Season · 07-02-2010, 01:11 PM

Quote:

Originally Posted by MacEachaidh

Does anything perhaps leap out as an obvious source?

If all the troublesome paragraphs are in <p class="MsoPlainText"></p> tags, then the MsoPlainText definition is to blame. Try changing these two values in your CSS, and see if the problem goes away:

Code:

.MsoPlainText {
display: block;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
text-align: justify;
text-indent: 0
}

Similar adjustments may need to be made for the other classes, if they are affecting things as well.

- M.

theducks · 07-02-2010, 01:18 PM

Quote:

Originally Posted by MacEachaidh

G'day VS,
Thanks so much for these suggestions. It didn't work, so I need to look as the CSS, I guess. I wonder if you can see anything here?

The code in the CSS says:

and at the top of the document, there's this:

Does anything perhaps leap out as an obvious source?

Thanks for any suggestions.

Margin-top in mso.... : 1em;
If the affected paragraph is of a Mso...style

Look at the
(div).section {
style
That is the Chapter heading style and may have big top and bottom margins (around the Chapter header)
I had the rude reminder the the "C" in CSS is for "Cascade"
You might be stacking settings upon ach other. (I wronly declared something at the Body style level that affected everything contained in
< the body>

MacEachaidh · 07-02-2010, 01:31 PM

Aaah, Vintage, perfect. That fixed it. (And now I understand - this was like a typographic advance spacing after every paragraph? Makes sense. Wouldn't using an em as the measurement make the space dependent on the font? So if I shifted up in point size, the gap at the bottom of the paragraph would widen as well? Could get messy.)

OK, I've started learning, thanks. I'll see what else I can work out. The suggestion of looking at ePubs that do produce the end result I want is a good one, but sometimes the syntax can seem so different, depending on what generated the code in the first place, that I can't tell what I'm comparing.

Ducks, thanks for your thoughts too. I'd read about definitions inheriting characteristics, and you've helped make that clear to me. Thanks!

DoctorOhh · 07-04-2010, 01:36 AM

Quote:

Originally Posted by MacEachaidh

Wouldn't using an em as the measurement make the space dependent on the font?

Yes.

Quote:

Originally Posted by MacEachaidh

So if I shifted up in point size, the gap at the bottom of the paragraph would widen as well? Could get messy.)

Not messy, proportional. For any reflowing text where users routinely resize their fonts em is the best way to create consistent looking paragraph indents and spacing between paragraphs.

If you used pt and you edited your your initial doc as a 8pt font with 3pt margins above and below each paragraph making a 6pt gap, it would look fine until a user resized the font up to 32pt (which for folks over 40 is common enough on a 6in 600x800 screen) now you have a large font and the spacing between paragraphs (6pt) is most likely smaller then the line spacing between normal sentences. Now that is messy, letters could start overlapping.

I like having a space between paragraphs so I use calibre's default which is .5em below and above each paragraph. I also use 1.1em for indents.

If you don't want spaces between your paragraphs then 0 as exampled Vintage Season is the way to go.

Update: I was just thinking and left and right margins do need to be fixed with PT or PX because as you scale the font size up you could lose valuable real estate if the left and right margins grew too.

neilmarr · 07-04-2010, 01:56 AM

Good to have your company, Mac. Hope you get it cracked. Slainte. Neil

MacEachaidh · 07-04-2010, 02:09 AM

Quote:

Originally Posted by dwanthny

For any reflowing text where users routinely resize their fonts em is the best way to create consistent looking paragraph indents and spacing between paragraphs.

Good point, dwanthny, and thanks for making it.

I think why I said "messy" was that I was thinking of the look of the end result; clearly it's personal taste, but if the text was blown up to the equivalent of around 18pt in the zoom capabilities of an eReader, I might still want a break between paragraphs, but I wouldn't want one of around 24 pt, as an em (top and bottom margin of 0.5 em) would likely give me. (This would depend on the typeface, wouldn't it? Is the em really directly calculated from the m glyph in the font in question, or is it some preset ratio, just as a point is assumed by most software to be 1/72nd of an inch?) And I wouldn't necessarily want the side margins to get proportionately bigger with the zoom of the font, would I? I am, as I said, a noob at this, though I've learned a fair bit since I started this thread; but it seems to me that if the side margins were expressed in ems, and the text size was zoomed, you're going to end up (depending on the device) with maybe two or three words per line in the middle of the screen and comparatively huge margins on either side. That doesn't seem desirable to me.

I prefer fully-justified text, with an indented first line and little or no spacing between paragraphs (well, okay, maybe just a bit!) So maybe a compromise seems reasonable: pts for left and right margins and the 1st-line indent, and maybe ems for paragraph spacing, if you use it. How does that sit?

Do please let me know of anything I've missed taking into account, though; I do want to learn, and really value the responses.

MacEachaidh · 07-04-2010, 02:12 AM

Quote:

Originally Posted by neilmarr

Good to have your company, Mac. Hope you get it cracked. Slainte. Neil

G'day Neil, ciamar a tha sibh?
(Do you know that bit of the language?)

Thanks for the welcome, mate. Hope things are well in sunny Monaco!
(It's bloody freezing here in Oz at the moment!)

edella · 07-05-2010, 07:53 AM

[QUOTE=MacEachaidh;988851]
I gather I really need to understand at least basic HTML and CSS to be able to use Sigil. I don't, currently. I sub-edit and do desktop layout for a living, so a lot of the concepts aren't unfamiliar to me; I just don't know the language and parameters of the code.

I've sort of been in your position, because I worked pretty intensively with pagemake (which is, after many buyouts and takeovers, kind of indesign's grandparent, I think). It was totally second nature to me and I couild do all the preliminary decisions on the computer.

You've got two main tasks, the first being to come up with an epub document. This can be done quite well in sigil's book view, as far as I can see, as long as you keep things straightforward. But its new software, so things won't be so 'intuitive'.

The second task is more difficult -- its to design the actual document so that it looks good and works effectively, the look rater than the content. The easiest way to do this, in my opinion, is to go back to art school days, and dig out a pad of paper and a few pencils. Once you have brainstormed the basic parameters of your document, editing it in sigil is just 'pick and shovel work' -- the main thought is beforehand and so you have a better idea of the eventual result.

Its nice to know HTML And All That, but that's for later on -- I wish there was a 'coding cookbook' listing the ingredents (HTML elements and what they do), plus increasingly complex recipes (things to do with them).

(Perhaps there is -- please tell me someone! Or perhaps we should write one?) But I should just dive in and have a go.

have fun! from edella

MacEachaidh · 07-05-2010, 08:29 AM

Hi edella,
Thanks for all those thoughts.

But one of my own comes to mind from what you've written: am I looking at Sigil the wrong way? It doesn't have a spelling checker or a text editor per se, so I was considering it as primarily a mark-up editor for the code. Have I misperceived it?

Bran

07-02-2010, 01:22 AM	#1
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Utter CSS noob looking to get started Hi folks, New to formatting ePubs, new to Sigil, and new to HTML. I gather I really need to understand at least basic HTML and CSS to be able to use Sigil. I don't, currently. I sub-edit and do desktop layout for a living, so a lot of the concepts aren't unfamiliar to me; I just don't know the language and parameters of the code. I've started with a few trial layouts, sticking largely with what I know -- using Adobe InDesign to lie out the text, exporting it as an ePub (InDesign has that ability as a feature). I'd like to bring the ePub into Sigil to create ToCs and break into chapters (which is a bit laborious in InDesign), but I need to be able to work out what I need to change, and what I need to change it to. And of course to edit and correct files that I don't have the source documents for, or exports out of Calibre. My attempts at working out the code have, to date, been a bit laughable. Can anyone suggest a good place to start learning basic CSS, enough at least to get Sigil working? Many thanks.

07-02-2010, 12:38 PM	#5
Vintage Season Pulps and dime novels... Posts: 343 Karma: 1952003 Join Date: Jan 2009 Device: Kobo Aura/Kobo Aura One LE/iPad Air	MacEachaidh, switch to "Code View" and check something, please. (You can get to "Code View" in Sigil by pressing F11, or using the View > Code View drop-down menu, or pressing the button that has the "< >" graphic.) If the troublesome paragraphs are enclosed in <p> and </p> tags, try adding this snippet between the <head> and </head> tags: Code: <style type="text/css"> p { border: 0px; padding: 0px; margin: 0 0 0 0; text-indent: 1em } </style> On the other hand, if the troublesome paragraphs are separated by <br /> tags, just remove them. If neither of those approaches fix the issue, you may have some overriding CSS already embedded within your document. - M. Last edited by Vintage Season; 07-02-2010 at 12:41 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Trying to get started . . .	GLL	Calibre	3	04-29-2010 03:36 AM
Getting Started Writing	markman	Writers' Corner	16	01-29-2010 05:55 AM
Getting Started	Pinecone	Calibre	2	11-02-2009 01:14 AM
Let's getting started ! ^^	scaza	Introduce Yourself	2	03-04-2009 12:25 PM
Can u help me to get started?	jeremygold	Sony Reader	2	01-02-2009 12:27 PM

07-02-2010, 02:59 AM	#2
capidamonte Not who you think I am... Posts: 374 Karma: 30283 Join Date: Jan 2010 Location: Honolulu Device: PocketBook 360 -- Ivory	Sigil edits as WYSIWYG in Book View -- you can certainly use that at this stage, and you can look at Code View to see what it does when you make a change in Book View. As for (X)HTML and CSS, try w3schools -- that's where I started, and while I'm no master, I do okay.

07-02-2010, 03:10 AM	#3
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	G'day cap, Thanks for the reply. I understand what you're saying. Some of the features I've managed to change in Book View, like applying attributes to selected text. But others - like getting rid of that benighted blank space between paragraphs that a lot of public-domain ePubs seem to have - you can't change in the WYSIWYG interface. (I tried to follow the instructions in the Sigil on-line manual page, but it seemed to make no difference at all to the files I tried it on. Sigil just laughed at me, and went on displaying them, even when I restarted the app and reloaded the files. I clearly need to alter the code, but I don't understand where or what syntax to use.) I'll try the link you gave, and see how I do. Thanks again.

07-02-2010, 04:59 AM	#4
capidamonte Not who you think I am... Posts: 374 Karma: 30283 Join Date: Jan 2010 Location: Honolulu Device: PocketBook 360 -- Ivory	It could be a lot of things, from how Sigil displays it, how the reading system you're using displays it, to what the structural markup is or what the CSS has to say about the structural markup. You're definitely going to have to understand (X)HTML and CSS. Fortunately, it only seems complicated until you get how they relate to each other -- which doesn't take long to figure out. You'll be fixin' 'em in no time.

07-02-2010, 01:31 PM	#9
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Aaah, Vintage, perfect. That fixed it. (And now I understand - this was like a typographic advance spacing after every paragraph? Makes sense. Wouldn't using an em as the measurement make the space dependent on the font? So if I shifted up in point size, the gap at the bottom of the paragraph would widen as well? Could get messy.) OK, I've started learning, thanks. I'll see what else I can work out. The suggestion of looking at ePubs that do produce the end result I want is a good one, but sometimes the syntax can seem so different, depending on what generated the code in the first place, that I can't tell what I'm comparing. Ducks, thanks for your thoughts too. I'd read about definitions inheriting characteristics, and you've helped make that clear to me. Thanks!

07-04-2010, 01:56 AM	#11
neilmarr neilmarr Posts: 7,215 Karma: 6000059 Join Date: Apr 2009 Location: Monaco-Menton, France Device: sony	Good to have your company, Mac. Hope you get it cracked. Slainte. Neil

07-05-2010, 07:53 AM	#14
edella Member Posts: 11 Karma: 64 Join Date: Jun 2009 Device: sony 505	[QUOTE=MacEachaidh;988851] I gather I really need to understand at least basic HTML and CSS to be able to use Sigil. I don't, currently. I sub-edit and do desktop layout for a living, so a lot of the concepts aren't unfamiliar to me; I just don't know the language and parameters of the code. I've sort of been in your position, because I worked pretty intensively with pagemake (which is, after many buyouts and takeovers, kind of indesign's grandparent, I think). It was totally second nature to me and I couild do all the preliminary decisions on the computer. You've got two main tasks, the first being to come up with an epub document. This can be done quite well in sigil's book view, as far as I can see, as long as you keep things straightforward. But its new software, so things won't be so 'intuitive'. The second task is more difficult -- its to design the actual document so that it looks good and works effectively, the look rater than the content. The easiest way to do this, in my opinion, is to go back to art school days, and dig out a pad of paper and a few pencils. Once you have brainstormed the basic parameters of your document, editing it in sigil is just 'pick and shovel work' -- the main thought is beforehand and so you have a better idea of the eventual result. Its nice to know HTML And All That, but that's for later on -- I wish there was a 'coding cookbook' listing the ingredents (HTML elements and what they do), plus increasingly complex recipes (things to do with them). (Perhaps there is -- please tell me someone! Or perhaps we should write one?) But I should just dive in and have a go. have fun! from edella

07-05-2010, 08:29 AM	#15
MacEachaidh Browser Posts: 745 Karma: 578294 Join Date: Apr 2010 Location: Australia Device: Kobo Touch, Kobo Aura HD	Hi edella, Thanks for all those thoughts. But one of my own comes to mind from what you've written: am I looking at Sigil the wrong way? It doesn't have a spelling checker or a text editor per se, so I was considering it as primarily a mark-up editor for the code. Have I misperceived it? Bran

Advert

Advert