Tags introducing extra spaces to text?

[BetterRed]

Originally Posted by Hitch

I would have said, had we done so.

And had you said so I might have been tempted to ask - W(hy)TF would you wanna do that?

The only reason I can imagine is that one has a must-have in one's toolchain that only runs on Windows - such as Atlantis, or the so-called grammar checker that I recently took for a test drive. Can't remember its name, it was an experience best forgotten

As you say it's bizarre - but the OP says he's going to install the Mac version so we'll know soon enough if that fixes it.

BR

[DrewBoyd]

When I tried it on just a space between words, it looks the same way as the screen grab with a very large space and the code view looks like this:

He escaped<i>&nbsp;</i>from the jail cell and...


The screen grab above is from the BookView within Sigil (for PC) but it also looks the same in the Sigil preview and when imported into Calibre.

The display font was set to Times New Roman. I downloaded the Mac version and it's doing the same thing.


I got the idea to try again with a <span> set-up and try setting the margins for the words like so:

span.italic {
margin-left: 0.35em;
margin-right: 0.35em;
font-style: italic;
}

This makes it display properly whether in left alignment or when justified. What I'm wondering is if there is any downside to doing it this way? I'm not opposed to this work-around if it won't cause any other troubles.

[Hitch]

Originally Posted by DrewBoyd

When I tried it on just a space between words, it looks the same way as the screen grab with a very large space and the code view looks like this:

He escaped<i>&nbsp;</i>from the jail cell and...

Hunh? That can't be right, or we could be on the track of the issue. Why do you have an italics coding surrounding an nbsp? Are you seeing these nbsp's in the other areas with the "gaps?"

(Methinks we're getting somewhere.)

The screen grab above is from the BookView within Sigil (for PC) but it also looks the same in the Sigil preview and when imported into Calibre.

The display font was set to Times New Roman. I downloaded the Mac version and it's doing the same thing.

Have you opened this in anything like ADE, Readium, Nook (for PC/Mac, whatever)?

I got the idea to try again with a <span> set-up and try setting the margins for the words like so:

span.italic {
margin-left: 0.35em;
margin-right: 0.35em;
font-style: italic;
}

This makes it display properly whether in left alignment or when justified. What I'm wondering is if there is any downside to doing it this way? I'm not opposed to this work-around if it won't cause any other troubles.

Uh...do you have that styling for i and b? Because if you do, that's why you are getting those gaps. Why do you have .35em surrounding the spans? That's not right at all. You should't have margins (or padding) around elements in a sentence. Either bold, italic, underscored, etc. That's what spaces are for.

Can you confirm that you're seeing the "nbsp" every place you're putting in the bold/italic? Are you adding that in Bookview, by the way?

Hitch

[BetterRed]

Originally Posted by Hitch

(Methinks we're getting somewhere.)

yep, I think thee is on the money.

@DrewBoyd - in Sigil Code View if you select the words you want italicised and press ctrl/i then the words will be wrapped in <i>...</i> tags, same for bold and underline. There's rarely (never ?) any need for non-breaking spaces mid sentence.

BR

[DrewBoyd]

So as not to confuse the issue, I thought I'd lay things out in a more orderly manner.

This book is built using Sigil for Mac, the font in Sigil's BookView is "Times New Roman" and I created the italics/bold both by using the buttons on the Bookview and by adding the tags manually in the CodeView.

This is the code view:



This is the paragraph in Sigil's BookView:



This is the paragraph in Calibre:



And this is the paragraph in Readium:



~~~~~~~~~
As for the whole <span> idea that I mentioned earlier, that was just something I thought of from my frustration as a possible work-around -- that wasn't how I actually do italics, etc.

[rubeus]

Again, the most essential thing is missing: the stylesheet.

[BetterRed]

@DrewBoyd - to post the style sheet, select it all in codeview, copy to clipboard, then paste into a post wrapped in code tags (that's the # icon in advanced)

Sample from a crutledge upload

a {
color:black;
}

a:link {
color:black;
}

a:visited {
color:black;
}

a:hover {
color:blue;
}

a:active {
color:black;
}

a {
text-decoration:none;
}


big {
font-size:200%;
font-weight:bold;
}

.bilbd {
margin-top:2em;
margin-bottom:2em;
text-align:center;
font-weight:bold;
text-indent:0;
}

body {
margin-top:0;
margin-bottom:0;
margin-left:15px;
margin-right:15px;
font-family:Arial,"Times New Roman", Times, serif;
}

.center {
text-align:center;
}

h1,h2,h3,h4,h5,h6 {
margin-top:0;
margin-bottom:1em;
margin-right:0;
margin-left:0;
text-align:center;
}

img {
margin-top:1em;
margin-bottom:1em;
margin-right:0;
margin-left:0;
}

.italic {
font-style:italic;
}

.noindent {
text-indent:0;
}

p,div {
margin-right:0;
margin-left:0;
text-indent:1.5em;
}

pre {
font-size:100%;
margin-left:25%;
}

.right {
text-align:right;
text-indent:0;
}

.smcap{
 font-variant:small-caps;
 } 
 
.blockquot {
margin-bottom: 5%;
margin-top: 5%;
margin-left: 5%;
margin-right: 2%;
font-size: 100%;
}

blockquote{
margin-bottom: 5%;
margin-top: 5%;
margin-left: 5%;
margin-right: 2%;
font-size: 100%;
font-style: italic;
}

.first_letter{
 font-size:150%;
 font-weight:bold;
}

.hang1 {
margin-left:1%;
text-indent:-1%;
}

.i8{
margin-left:8em;
}

.centerpage{
margin-top:8em;
}

BR

[DrewBoyd]

Thanks so much, @BetterRed! I wasn't sure how to get the whole thing posted. Here it is:

/* Structure */
body {
 oeb-column-number: 1;
 font-size: 100%;
}


/* Typeography */

* {
 margin-left: 20px;
 margin-right: 20px;
 padding: 0em;
}

h1, h2, h3, h4, h5, h6 {
 font-weight: 500;
}

h1 {
 font-size: 1.5em;
 margin: 2em 20px 0.75em 20px;
 text-align: center;
}

h1.chaptertitle {
 font-size: 1.5em;
 margin: 25% 20px 1em 20px;
 text-align: center;
 page-break-before:always;
}

h1.titlepage1 {
 font-size: 2.5em;
 margin: 20% 20px 0.25em 20px;
 text-align: center;
}

h1.titlepage2 {
 font-size: 2.0em;
 margin: 0.05em 20px 0.5em 20px;
 letter-spacing: 5px;
 text-align: center;
}

h2 {
 font-size: 1.15em;
 font-style: italic;
 margin: 0 20px 1.25em 20px;
 text-align: center;
}

h2.titlepage {
 font-size: 1.25em;
 font-style: italic;
 text-align: center;
 margin: 0 20px 2.5em 20px;
}

h3 {
 font-size: 0.9em;
 text-align: center;
 margin: 20% 20px 1.0em 20px;
}

h4 {
 font-size: 1.125em; 
 font-style: italic;
 margin: 0 0 -.6em 0;
}

p {
 font-size: 1em;
 margin: 0.35em 20px 0 20px;
 text-indent: 1.6em;
 text-align: justify;
 line-height: 1.4em;
}

p.firstparagraph {
 margin: 0.6em 20px 0 20px;
 text-indent: 0.005em;
 text-align: justify;
}

p.italic {
 font-style: italic
}

p.caption {
 margin:0 0 1em 0;
}

p.center {
 margin: 0.35em 20px 0 20px;
 text-indent: 0.005em;
 text-align: center;
}

p.scenebreak {
 margin: 1.5em 20px 2em 20px;
 text-indent: 0.005em;
 text-align: center;
}

p.alsoby {
 margin:0.80em 20px 0 20px;
 font-size: 1.15em;
 text-indent: 0.005em;
 text-align: center;
}

p.copyright {
 margin:0.85em 20px 0 20px;
 font-size: 0.8em;
 text-indent: 0.005em;
 text-align: center;
}

a:link {
	text-decoration: none;
}

blockquote.quote {
 padding-left: .5em;
 border-left: .3em solid #ccc;
}


/* Images */

img.cover {
 max-width:100%; 
 border-style:none;
}

img.titlepage {
 max-width:80%; 
 border-style:none;
}

img.scenebreak {
 max-width:20%; 
 border-style:none;
}

div.center {
 margin-left:auto;
 margin-right:auto;
 width: 99%;
}

img.floatleft {
 float: left;
 margin: 0px 10px 5px 10px;
}

img.floatright {
 float: right;
 margin: 0px 10px 5px 10px;
}

img.border {
 border-style:solid;
 border-width:thin;
}



/* Lists */

ul {
 list-style-type: circle;
}

ul.disc {
 list-style-type: disc;
}

ul.square {
 list-style-type: square;
}



/* Misc */

/* Use with "Checkbox" in Clips to create an inline checkbox square */
.checkbox {
 font-size: 75%;
 border: .2em solid #ccc;
}

[doubleshuffle]

I'm not one of the experts and so have never come across this weird * category:

* {
 margin-left: 20px;
 margin-right: 20px;
 padding: 0em;
}

I may be wrong, but I have a feeling this is the cause of the problem. Have you tried replacing the "*" with "body"?

[Toxaris]

Originally Posted by DrewBoyd

Thanks so much, @BetterRed! I wasn't sure how to get the whole thing posted. Here it is:

/* Typeography */

* {
 margin-left: 20px;
 margin-right: 20px;
 padding: 0em;

Ding-ding-ding! We have a winner. This specifies that all tags have a margin left and right. That includes empty spans, italics, bold, the works. What are you trying to accomplish with this? I guess you only want this for the paragraph tag. If so, replace the asterisk with p.

[doubleshuffle]

***Obsolete post.***

[rubeus]

* {
margin-left: 20px;
margin-right: 20px;
padding: 0em;
}

This matches to everything. To <i>, <b>, <span>´etc

[Notjohn]

/* Typeography */

I'm not sure what this means, but if it does mean something, shouldn't it be Typography?

[DiapDealer]

That's a comment.
Anything between /* */ is ignored in css

[theducks]

Originally Posted by Toxaris

Ding-ding-ding! We have a winner. This specifies that all tags have a margin left and right. That includes empty spans, italics, bold, the works. What are you trying to accomplish with this? I guess you only want this for the paragraph tag. If so, replace the asterisk with p.

I pick this one also

WILDCARDS ARE DANGEROUS

in an earlier post you also had left and right margins in a span (but span.italic would only apply to <span class="italic"