Selectively assigning font-size within an element

[ElMiko]

I am assuming this is a hard "No", but I figured I'd ask the pros anyway...

Is there a way—using css—to change the font-size of letters in an element, but not the font-size of punctuation or numbers?

Or is my only option to manually <span> out the letter strings and assign the font-size at that level?

(Normally, I would comfortably assume this is impossible, but you guys not-so-recently flagged properties like "text-align-last" which I would have imagined was so situation specific that it wouldn't exist... so here we are.)

[Turtle91]

Traditionally it required the use of spans… which is very frustrating seeing a very large opening quote with the large initial drop cap.

I think renderer’s simply choose to include punctuation in the :first-letter pseudo-element.

I’m not aware of a :first-symbol ???

[icearch]

Think another way around: edit the font file.
(which is more tedious and require pro tools and knowledge)

[icearch]

To be serious, this level/depth of formatting control kinna kills the whole premises of re-flowable file isn't it?

[JSWolf]

Originally Posted by icearch

To be serious, this level/depth of formatting control kinna kills the whole premises of re-flowable file isn't it?

No it doesn't kill the premise of reflowable. It just means that to get what you want, you'd need to use an embedded font that's been edited to do what you want.

[RbnJrg]

Originally Posted by ElMiko

Is there a way—using css—to change the font-size of letters in an element, but not the font-size of punctuation or numbers?

Yes, of course, but under epub3 (and with no custom font nor spans). You need to employ the following code:

1. In your xhtml file:

  
   <p class="MyFont">Lorem ipsum dolor March 29, 2026 sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

2. In you .css file:

@font-face {
    font-family: "MyTimes";
    src: local("Times New Roman"); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyTimes";
    src: local("Times New Roman");
    unicode-range: U+0030-0039, U+0021-002F, U+003A-0040, U+005B-0060, U+007B-007E;   
    size-adjust: 150%; /* Here you set the size you wish */
}

.MyFont {
    font-family: "MyTimes";
    line-height: 1.2em;
}

Here you have how it looks under Readium:



With this method (you must define twice the @font-face declaration, the first one is the fallback code for the whole unicode-range), you don't need an special font. In my example I employed a local font ("Times New Roman") but if you wish, you can incluye your custom font in the epub and in that case, you need to replace:

    src: local("Times New Roman");

with:

    src: url("../Fonts/YourFont.ttf");

Of course, also you can use an .otf font. Also, don't use 150% for the size of numbers; I included that figure so you can watch better how the method works, but a size 110% it would be ok.

The unicode-range method is extremely flexible because it allows you to segment the font by any "block" of characters you wish to treat independently, such as uppercase letters, thus providing another way to achieve raised caps and drop caps.

To make uppercase letters larger, you only need to define the Unicode range corresponding to the capital letters of the Latin alphabet.

[RbnJrg]

Originally Posted by JSWolf

No it doesn't kill the premise of reflowable. It just means that to get what you want, you'd need to use an embedded font that's been edited to do what you want.

That only for old ereaders; with modern ones, you can use the method I posted previously; another advantage of epub3 over epub2.

[RbnJrg]

Originally Posted by icearch

Think another way around: edit the font file.
(which is more tedious and require pro tools and knowledge)

Under epub3 that is no longer necessary.

[JSWolf]

Originally Posted by RbnJrg

That only for old ereaders; with modern ones, you can use the method I posted previously; another advantage of epub3 over epub2.

But again, that's not backwards compatible. So if you are trying to be backwards compatible, go for the spans.

The problem with ePub is that you cannot be sure the person reading will be doing so with an ePub3 program.

[ElMiko]

Thanks, all.

@RbnJrg - This is interesting. As I'm doing all my reading in KOReader these days, I try to be cautious about how advanced I get with my css as I know that KOR is not fully epub3 compatible (something I know you lament). But your elegant solution still gives me lots of food for thought.

@icereach - I don't see how this would negatively affect the reflowability of the document(any more than selectively changed relative font sizes currently does, like THIS)...

[Turtle91]

Despite some individual’s willful ignorance of the concept of fall-back coding, you can code for both ePub 2 and 3 in the same ePub. It takes a little more work, but it works. You can use all the new techniques to give your customers the best possible product if their device supports it and a good product if they don’t.

Take a look at:
css hierarchy rules
@supports
@media
Scripts

You can also search here since there are several threads discussing fall-back coding.

Cheers!

[ElMiko]

Thanks, @Turtle91, I'll do that. In this case, however, it seems that the fall back coding would have to be <span>ing the desired text anyway, at which point the elegant epub3 solution becomes visually redundant.

But your point is well-taken, and there are certainly other situations where two slightly different treatments (one that makes it looks great, and one that makes it look acceptable) could be called for.

[icearch]

Originally Posted by ElMiko

Thanks, all.

@RbnJrg - This is interesting. As I'm doing all my reading in KOReader these days, I try to be cautious about how advanced I get with my css as I know that KOR is not fully epub3 compatible (something I know you lament). But your elegant solution still gives me lots of food for thought.

@icereach - I don't see how this would negatively affect the reflowability of the document(any more than selectively changed relative font sizes currently does, like THIS)...

I was just joking around, nevermind.

[RbnJrg]

Originally Posted by ElMiko

Thanks, all.

@RbnJrg - This is interesting. As I'm doing all my reading in KOReader these days, I try to be cautious about how advanced I get with my css as I know that KOR is not fully epub3 compatible (something I know you lament). But your elegant solution still gives me lots of food for thought.

No, the method doesn't work on KOReader; you need an ereader based on Chromiun/Webkit/Readium and KR is based on CoolReader

[JSWolf]

Originally Posted by ElMiko

Thanks, @Turtle91, I'll do that. In this case, however, it seems that the fall back coding would have to be <span>ing the desired text anyway, at which point the elegant epub3 solution becomes visually redundant.

But your point is well-taken, and there are certainly other situations where two slightly different treatments (one that makes it looks great, and one that makes it look acceptable) could be called for.

But in this case, it can look the same. It just means the ePub3 solution is not going to be as simple. However, the solution that would work for both ePub2 and ePub3 actually is better as it would not rely on any embedded font.

It just mean you have to use spans which will work in more cases then the embedded font solution.