Quote:
Originally Posted by Turtle91
Another option is to use small-caps css
Code:
.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.