MobileRead Forums - View Single Post - Selectively assigning font-size within an element

Turtle91 · 03-31-2026, 07:56 AM

I seem to recall one of the “downsides to spanning” conversations we’ve had in these threads about this topic was that it broke spellchecking, audio readback, searching, and possibly accessibility in some software because

<span>W</span>ord ≠ Word

I imagine newer software may have fixed this to some degree, but if you are using newer software it likely supports the newer capabilities in ePub3 anyway. For these reasons, and my abhorrence of kludgy coding, I stay away from breaking up words with spans just to achieve a particular (drop-cap, small-cap, etc.) type effect. (I have no issues with spanning a whole word or phrase.)

To fix the OP’s original issue (if I understand it correctly) of preventing punctuation/symbols/quotes from being included in the :first-letter pseudo selector, I use one of the following methods: 1) place the cursor to the right of the offending punctuation and tap the Backspace key, or 2) place the cursor to the left of the offending punctuation and tap the Delete key. Both methods work equally well!

It is amazing how few people would actually notice a missing opening quotation at the beginning of a chapter, and even fewer still would care…

Which do you think is the cleaner coding (assuming identical styling is achieved in the css)??

Code:

/*this css is just an example, style as you wish*/
p.first              {margin-top:2em; text-indent:0}
p.first:first-line   {font-variant:small-caps}
p.first:first-letter {font-size:6.7em; font-family:"Dion’s Big Font"}

<p class="first">Hey Dion,” she said. “That was amazing! I’ve never seen such 
efficient and practical coding!”</p>

~OR~

p.first                 {color=red}
span.firstlineinchapter {font-size:1.2em; text-transform:uppercase} 
span.smallpunct         {display:inline-block; font-size:.5em}
span.dropcap            {font-size:6.7em}
span.bigletter          {font-size:2em}
/*all the myriad span styling required to make this work*/

<p class="first"><span class="firstlineinchapter"><span class="smallpunct">”
</span><span class="dropcap">H</span>ey <span class="bigletter">D</span>
ion,” she said. “<span class="bigletter">T</span>hat was amazing!</span> … </p>

03-31-2026, 07:56 AM	#17
Turtle91 A Hairy Wizard Posts: 3,481 Karma: 21000001 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I seem to recall one of the “downsides to spanning” conversations we’ve had in these threads about this topic was that it broke spellchecking, audio readback, searching, and possibly accessibility in some software because <span>W</span>ord ≠ Word I imagine newer software may have fixed this to some degree, but if you are using newer software it likely supports the newer capabilities in ePub3 anyway. For these reasons, and my abhorrence of kludgy coding, I stay away from breaking up words with spans just to achieve a particular (drop-cap, small-cap, etc.) type effect. (I have no issues with spanning a whole word or phrase.) To fix the OP’s original issue (if I understand it correctly) of preventing punctuation/symbols/quotes from being included in the :first-letter pseudo selector, I use one of the following methods: 1) place the cursor to the right of the offending punctuation and tap the Backspace key, or 2) place the cursor to the left of the offending punctuation and tap the Delete key. Both methods work equally well! It is amazing how few people would actually notice a missing opening quotation at the beginning of a chapter, and even fewer still would care… Which do you think is the cleaner coding (assuming identical styling is achieved in the css)?? Code: /this css is just an example, style as you wish/ p.first {margin-top:2em; text-indent:0} p.first:first-line {font-variant:small-caps} p.first:first-letter {font-size:6.7em; font-family:"Dion’s Big Font"} <p class="first">Hey Dion,” she said. “That was amazing! I’ve never seen such efficient and practical coding!”</p> ~OR~ p.first {color=red} span.firstlineinchapter {font-size:1.2em; text-transform:uppercase} span.smallpunct {display:inline-block; font-size:.5em} span.dropcap {font-size:6.7em} span.bigletter {font-size:2em} /all the myriad span styling required to make this work/ <p class="first"><span class="firstlineinchapter"><span class="smallpunct">” </span><span class="dropcap">H</span>ey <span class="bigletter">D</span> ion,” she said. “<span class="bigletter">T</span>hat was amazing!</span> … </p> Last edited by Turtle91; 03-31-2026 at 08:04 AM.