What am I missing in using <span> for bold?

[zacsmith]

Using Sigil 0.6.1 for Mac. I've looked for this issue issue here and elsewhere, but can't find a clue...

I seem to be missing something in using <span> to make words bold.

Here's the CSS:

.b {
font-weight:bold !important;
}

And the HTML:

<p><span class="b">Awareness</span>&nbsp;—&nbsp;The ability to look beyond your ego and see yourself as both a physical and spiritual being.</p>

The <span> for the bold word "Awareness" does not work (the word is not bold).

Using this HTML works fine:

<p><span style="font-weight:bold">Arrows</span>&nbsp;—&nbsp;Two points on the Enneagram that diagram the movement of stress and eustress in each Ennea-type.</p>

Or, using <b> works fine, but goes against advice to use CSS (although it is simpler).

Since I've completed coding the entire pub using the first span code, I'd rather not bloat the file using all the extra code in the second span example.

I've checked the rest of the CSS to make certain I'm not accidentally clearing the style, but the odd thing is that the same thing, but for italics, works OK.

What and I missing?

Thanks! (I'll be out until this afternoon, so I'll check back in then.)

zack

[theducks]

You did remember to link THAT CSS to the HTML page?

Another common reason is there is an error elsewhere in the CSS that viewer like ADE will discard the whole CSS rather than just the selector.

[mrmikel]

Run the thing through the CSS check in Tools, Validate stylesheet and see if that helps catch any error.

BTW make sure you don't have any style commands at the top of this particular html document that cancels it out. This only likely if you brought it in from somebody else's document, like Hyperwar or other online document source.

[zacsmith]

Just got back in. Thanks very much for the suggestions, the ducks and mrmikel. Gives me some things to check this evening. I'll report back with my results -- hopefuilly I find the cause.

zack

[Turtle91]

Just wondering...I haven't tried before...can you define a class with an element that is already reserved??

.b {font-weight:bold}

when <b> is already reserved??


If it were me, I would do a S/R:
Search: <span class="b">(.*?)</span>
Replace: <strong>\1</strong>

with:
strong {font-weight:bold}

That way you keep styling out of the document and in the css, and you don't need to bloat it with extra <spans>.

Please let us know if you find the problem.

Cheers,

[theducks]

Originally Posted by Turtle91

Just wondering...I haven't tried before...can you define a class with an element that is already reserved??

.b {font-weight:bold}

when <b> is already reserved??


If it were me, I would do a S/R:
Search: <span class="b">(.*?)</span>
Replace: <strong>\1</strong>

with:
strong {font-weight:bold}

That way you keep styling out of the document and in the css, and you don't need to bloat it with extra <spans>.

Please let us know if you find the problem.

Cheers,

dot b is not b

[mrmikel]

But you can redefine b to be something else. As a test, it just made it font-size 150% instead of emphasized and it worked.

That is the beauty of CSS. You can fix a problem once in the stylesheet instead of 150 times in the text. And if you change your mind, another easy change to the stylesheet instead of 150 more corrections.

[theducks]

Originally Posted by mrmikel

But you can redefine b to be something else. As a test, it just made it font-size 150% instead of emphasized and it worked.

That is the beauty of CSS. You can fix a problem once in the stylesheet instead of 150 times in the text. And if you change your mind, another easy change to the stylesheet instead of 150 more corrections.

b {font-size: 150%; font-weight: normal;}
.b {font-weight: 700}

[Turtle91]

cool!

That kind of goes against my program-oriented background - being able to define a reserved tag as a user class (the difference between b and dot b). It certainly makes CSS more flexible. Although if I started doing that (using b and .b at the same time) I would probably confuse myself even more than I already do!!

[zacsmith]

Well, thanks for all the suggestions. Here are the results:

CSS is properly linked. There is only one style sheet.
I created and have been the only one to work on the file, but that's not to say I didn't introduce errors.

ADE shows the bolded words properly, but they did not show in Sigil Book View or Calibre preview.

It seems that <span> for bolding is simply not displays properly in Sigil. The "bold" button works fine, but inserts the <b> code. Oddly enough, <span> works OK for italics.

Late now, so I'll take a closer look in the morning and do some more testing on when I'm fresh.

[theducks]

Originally Posted by Turtle91

cool!

That kind of goes against my program-oriented background - being able to define a reserved tag as a user class (the difference between b and dot b). It certainly makes CSS more flexible. Although if I started doing that (using b and .b at the same time) I would probably confuse myself even more than I already do!!

Personally I HATE the practice of using a dot name that is 99% similar to a Tag name. It make debug a lot harder looking for a flyspeck.

<p class="p"> OMG </p>
What is wrong with para, normal, indent, title (usually centered),chapter...

[zacsmith]

Using "b" is a little departure for me. Coming from a print background, I name typographic styles descriptive names so I can know what they do when I come back to a project a year later. Trying to save file space I guess.

I usually have been doing the same thing in CSS, like "anecdote-follow-nosp", etc. More bits but easier to work with, IMHO.

I do need to do some more reading on "reserved" tags, though. As a designer, this programming stuff is fun but make my eyes hurt -- I have to work to think digitally, rather than visually!

[Jellby]

Originally Posted by Turtle91

cool!

That kind of goes against my program-oriented background - being able to define a reserved tag as a user class (the difference between b and dot b). It certainly makes CSS more flexible. Although if I started doing that (using b and .b at the same time) I would probably confuse myself even more than I already do!!

Well, it's not exactly a reserved tag, it's just a tag with some intended semantics and some default style. Also, different renderers will probably have different default styles (a text-based browser could draw it with inverted background and foreground colours, a text-to-speech system could apply some voice inflection).

Maybe <b> is not the best example, but take <em>. It's intended to mean emphasis and, although its default style is often italic, you could want to have some other style in a given document (bold, underlined, red, different font, letterspaced...). So, not only you can override default styles, but it's sometimes a good idea to re-define them, when it is important. For instance, I often use:

em { font-style: italic; }
em em { font-style: normal; }

so I make sure that <em> is italic and <em> inside <em> is not.

And you can even make a <div> behave as a <span> (display: inline) and vice-versa (display: block). But there are some XHTML restrictions that still apply (a <span> or a <p> cannot contain a <div>, for instance). Since <p> cannot contain <div>, I sometimes create a special class of <span> that behaves as <div>, and then <p> can contain this <span>

[Toxaris]

If the bold shows in ADE but not in Sigil nor Calibre makes me think that you are using an older version of Sigil that still runs on Qt4. That version has some difficulties with fonts.
Never just trust solely on Sigil or Calibre to see how your book will look. ADE is much more representative.

[zacsmith]

If the bold shows in ADE but not in Sigil nor Calibre makes me think that you are using an older version of Sigil that still runs on Qt4. That version has some difficulties with fonts.
Never just trust solely on Sigil or Calibre to see how your book will look. ADE is much more representative.

That may be the answer, Toxaris. I am using Sigil .0.6.1 for Mac until I upgrade to the latest OSX, which means upgrades to ALL my software ($$$$).I'll be testing in some standalone readers today. but so far, ADE shows everything fine.

This discussion has given me some good idea about handling styles better....