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

[Ripplinger]

One thing I've picked up from this thread is a preference to use a span class for bold and italics rather than just <b> and <i>. I've usually gone for the simplest coding before and stuck to <b> and <i> mostly because of running into paragraphs with so much "span class" clutter, it gets difficult to wade through the code when it keeps swapping back and forth.

Is there a difference in how some readers will handle <b> and <i> so that using span class would really be preferable?

[theducks]

Originally Posted by Ripplinger

One thing I've picked up from this thread is a preference to use a span class for bold and italics rather than just <b> and <i>. I've usually gone for the simplest coding before and stuck to <b> and <i> mostly because of running into paragraphs with so much "span class" clutter, it gets difficult to wade through the code when it keeps swapping back and forth.

Is there a difference in how some readers will handle <b> and <i> so that using span class would really be preferable?

Span class=
Allows you full control: Maybe I want italic...No wait...Underlined....No wait...BoldItalic. Ah, heck PLAIN

[Turtle91]

Originally Posted by theducks

Span class=
Allows you full control: Maybe I want italic...No wait...Underlined....No wait...BoldItalic. Ah, heck PLAIN

That certainly gives full control, and if you wanted to take that to it's extreme you could have spans around every letter!! Just imagine the bloat!

But, as they were saying above, you can define <b>, <i>, <em>, <strong> to do anything you want. I would think that a span should only be used when there IS NOT already a tag that does the same thing.

Why replace <em> with <span class="emphasis">, or <strong> with <span class="strong">??

There is a list of commonly used tags in the standards for the exact reason that they are commonly used and you can reduce bloat and increase readability by using them.

[theducks]

Every Letter? Absurd

While allowed, A redefined b to something else is confusing.

Let us leave standard tags (mostly) as is
Bold is bold
Italic is slanty

You might tweak the size or line-space, but they are still what they say

Bloat comes from people spanning everything instead of just the differences:

<p><span class="bloated-normal">This is Span<\span> <span class"underscore">Abuse</span> <span class="bloated-normal">at it's worse.</span></p>

<p class="normal">This is Span done <span class"underscore">nicer</span> more normally.</p>

[Ripplinger]

Unfortunately, your first example is what I've run into far too often. When you drop the size of an ebook by 100kb just by replacing all the span class options for just bold and italics to <b> and <i>, I go for dropping the bloat. So it seems it's still an ok option to use. I never redefine b or i for that purpose. The most I redefine are h tags at times because the default is just too large at times.

[Turtle91]

When I first started out I wanted my docs to be as clean as possible and always used <i> and <b>. After studying a bit more I've been convinced that I should keep only structure tags in the document and all styling in the .css. I really hated adding those <em> and <strong> tags!! I still use <i> and <b> when coding...and then just do a S/R to change them at the end - that way I don't have to look at the <em> and <strong> tags taking up that extra room!! Whatever works right!!

I like your second example...but this would be better:

<p>This is done <em class="underscore">nicer</em> more normally.</p>

with
p {"normal paragraph styling"}
em.underscore {text-decoration:underline; font-style:normal}

Since the <em> tag is specifically designed to emphasize some text...its only that most readers default to italics. When we are defining the structure of the document we should simply say that particular words are emphasized with a given class.

Now...in that particular case a span would work just as well, but it would be 4 letters longer (2 for each tag). Depending on the book, 4 letters per italics can add up to a bunch of bloat.

Now imagine using <span class="italics">...</span> as opposed to <em>...</em> (with em {font-style:italic} ); that's 22 letters longer per instance!!

I suppose I'm being a little OCD-ish, but I just hate the idea of taking up more space than I absolutely have to. I just cleaned up a book I bought (it's amazing how many bad practices they do in a "professional" book) and reduced the file size from 3.3MB to 1.2MB....I did a happy dance...literally. Yes, I need a life!

Cheers!

[Ripplinger]

Originally Posted by Turtle91

... I suppose I'm being a little OCD-ish, but I just hate the idea of taking up more space than I absolutely have to. I just cleaned up a book I bought (it's amazing how many bad practices they do in a "professional" book) and reduced the file size from 3.3MB to 1.2MB....I did a happy dance...literally. Yes, I need a life!

Cheers!

You're not the only then, I'm exactly the same way. Epubs bloated for no reason really bug me and I have to clean them up. Over-sized images and multiple copies of the same image contribute a lot to that bloat also and I clean those up as well and compress the images.

[theducks]

Originally Posted by Ripplinger

You're not the only then, I'm exactly the same way. Epubs bloated for no reason really bug me and I have to clean them up. Over-sized images and multiple copies of the same image contribute a lot to that bloat also and I clean those up as well and compress the images.

I have done that.
I have even gone so far as to rebuild an Image only chapter head, with an Image with Text counterpart. Talk about file size shrinkage (saved >1M). This was not STRIPPING the images, just doing it (size) efficiently

[Turtle91]

Originally Posted by theducks

I have done that.
I have even gone so far as to rebuild an Image only chapter head, with an Image with Text counterpart. Talk about file size shrinkage (saved >1M). This was not STRIPPING the images, just doing it (size) efficiently

Absolutely!! lol

I just don't understand why people would have a different image for each chapter when the only difference in the image is the number!! Just use a header with the number and the same image...only 1 image for 69 chapters instead of 69 images....sheesh.

[theducks]

Originally Posted by Turtle91

Absolutely!! lol

I just don't understand why people would have a different image for each chapter when the only difference in the image is the number!! Just use a header with the number and the same image...only 1 image for 69 chapters instead of 69 images....sheesh.

Because it is a lot of work to get it looking good. IMHO this does NOT work on tiny displays. (I tried reading on my phone: 3 words a line, 40 bazillion page flips , talk about breaking a readers trance

[Ripplinger]

I've run into books with 35+ chapters where each had a graphic image, one for each chapter, identical to every other chapter image except for a few pixels in the dimensions for the white space around it (which I'm sure was just accidental), and the image did not include the chapter number... the number of the chapter itself was in text.

I just don't know what publishers are thinking when they do something that asinine.

[mrmikel]

There are instances where the css makes sense. The case that comes to mind is picture captions. Sometimes smaller text looks good, sometimes italics. The css approach lets you tweak it just right without much pain.

[zacsmith]

Back again....

After testing my files I find the more reliable way to bold text is simply yo use "<b>" and not a span or redefined "b". Saves file space, too.

So I'm going to replace all the span class statements with plain ol' "b"s. and do the italics while I'm at it.

Thanks for the discussion. It's been very educational and opened my eyes to more CSS possibilities.

zack

[Arios]

Since <p> cannot contain <div>, I sometimes create a special class of <span> that behaves as <div>, and then <p> can contain this <span>

Jellby, can you be more specific about it, it intrigues me (purpose of this special class for example)?

[Jellby]

Well, say you want a paragraph to contain a display block (an image, a poetry fragment, a newspaper title...) and continue with no indent afterwards. You could do it by breaking the paragraph:

<p>He read that:</p>
<div class="title">ANDORRA INVADES FRANCE</div>
<p class="noindent">and fainted.</p>

or you try to keep the structure:

<p>He read that:
<span class="block title">ANDORRA INVADES FRANCE</span>
and fainted.</p>

where:

span.block { display: block; }