Selectively assigning font-size within an element

[ElMiko]

Originally Posted by Turtle91

Oh! That’s much easier; that’s just a basic span.

.bigger {font-size=1.1em}

<p>BORN: Dec. <span class="bigger">15, 1948</span></p>

~OR~

.smaller {font-size=.9em}

<p><span class="smaller">BORN: Dec.</span> 15, 1948</p>

Yes, it's easy but more cumbersome that you think. Because the actual code would look like:

<p><span class="smaller">BORN</span>: <span class="smaller">Dec</span>. 15, 1948</p>

And the example I used was just for illustrative purpose. Expand it across 30 or 40 more characters with a similar mix of numbers, punctuation, and letters. (Again, for example: "BORN: DEC. 15, 1948 / DIED: OCT. 10, 1984 / A MOTHER, A SISTER, A DAUGHTER; LOVED BY ALL.")

As I said at the outset, this was my original solution, but i was wondering if there was a way to automatically isolate sizing to a specific type of character. (Which RbnJrg demonstrated, albeit strictly in a epub3 context)

[Turtle91]

Another option is to use small-caps css

.sc {font-variant:small-caps}
<p class="sc">BORN: Dec. 15, 1948 / DIED: Oct. 10, 1984 / A MOTHER, A SISTER, A DAUGHTER; LOVED BY ALL.</p>

Small-caps css is supported widely - it’s been around since css 1 in 1996 - and you can easily have a smaller font-size capital letter by putting a lowercase letter in the string. eg "Dec" looks like "DEC"

I also think it leaves the font-size of the numbers alone… so you can play around with that.

Some people don’t like using it, and I’m sure they’ll jump on here and say "it’s an ePub3 thing so don’t use it"… but that is just not true. There may be devices/apps that don’t do it "perfectly", but it’ll look great for most and acceptable for anyone else.

[ElMiko]

Originally Posted by Turtle91

Another option is to use small-caps css

.sc {font-variant:small-caps}
<p class="sc">BORN: Dec. 15, 1948 / DIED: Oct. 10, 1984 / A MOTHER, A SISTER, A DAUGHTER; LOVED BY ALL.</p>

Small-caps css is supported widely - it’s been around since css 1 in 1996 - and you can easily have a smaller font-size capital letter by putting a lowercase letter in the string. eg "Dec" looks like "DEC"

I also think it leaves the font-size of the numbers alone… so you can play around with that.

Some people don’t like using it, and I’m sure they’ll jump on here and say "it’s an ePub3 thing so don’t use it"… but that is just not true. There may be devices/apps that don’t do it "perfectly", but it’ll look great for most and acceptable for anyone else.

A few things....

Small caps won't change the height of the capital letters. As I've said a couple of times, the original question was about modifying ALL letters—uppercase and lowercase—to be smaller without numbers or punctuation being affected.

Second, unfortunately, small caps is less reliable than you might think. NeoReader, for example, is very inconsistent in recognizing them. Trust me on this, small-caps does not solve this issue. Period. Particularly because if it fails on all lower-case text it will be be really disruptive (e.g. <span class="sc">no exit</span> hung over the door.)

Are there other workarounds? Sure. I could just leave all the text in caps without stylizing further at all. Or deciding that it's okay to shrink the numbers and punctuation. But that's solving the problem by deciding that you don't want to solve the problem. I already know how to do that. From what I can see, the only solutions to making the text look the way I said in the original post are a) swiss cheese <span>s, and b) RbnJrg's targeted Unicode approach.