ePub CSS @fontface Unicode chars render in <td>, not in <div>, other elements

[Abelinkin]

Hi,

I'm working on a project to convert several hundred thousand life sciences articles into epub format, and we have run in to a problem with character entities.

Being that these are scientific articles, the characters are from a wide range of Unicode charts, and are essential to transmitting the meaning of the data.

The problem is that in my epub, the character entity inside a table data cell is rendering the @font-face correctly, but inside any other HTML element, the character renders as an empty box on our ipad2s.

So inside div@class="stix", we see boxes, inside td@class="stix", we see the character rendered properly.

      <div class="stix">Let &#x1d542; be a field, which will be either the complex numbers &#x02102; or the finite field &#x1d53d;</div>
      <table id="t31" rules="all">
        <tr>
          <td>&#x1d542;</td>
          <td class="stix">&#x1d542;</td>
          <td>U+1D542 MATHEMATICAL DOUBLE-STRUCK CAPITAL K </td>
        </tr>

My CSS looks like this:

@font-face {
    font-family: 'STIX';
    src: url('STIX-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    unicode-range:  U+02B0-02FF, U+07C0-07FF,  U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
}
@font-face {
    font-family: 'STIX-Math';
    src: url('STIXMath-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    unicode-range:  U+02B0-02FF, U+07C0-07FF,  U+0900-097F,U+0F00-0FD8, U+1D00-1D7F, U+1D80-1DBF, U+1D400-1D7FF, U+1E00-1EFF, U+1F00-1FFE,U+2000-206F, U+20A0-20B8, U+20D0-20F0, U+2300,23FF, U+25A0-25FF, U+2600-26FF, U+27C0-27EF, U+27F0-27FF, U+2900-297F, U+2A00-2AFF, U+2B00-2B59, U+2C60-2C7F ;
}
 
 
.stix   {
        font-family: "STIX", "STIX-Math", sans-serif;
}

Is it possible that this is a rendering bug, because the character is rendering in the table cell, but not in other elements?

Have I missed something obvious?

Thanks,
Abe

[Toxaris]

No, not really. You don't need the 'unicode-range' attribute though, nor the format part of the src.
iBooks is a little peculiar in font embedding. You need an additional file in your META-INF folder, called com.apple.ibooks.display-options.xml. For more info see the excellent article here.

This being said, not all fonts render correctly in readers. Some fonts just won't always work. Some don't in ADE and some don't in iBooks. Try if it works in ADE. If it doesn't, try another font.

[Jellby]

I believe iBooks has some funny concept of CSS... try with <div><span class="stix"> instead of <div class="stix">

And why are you using both STIX and STIX-Math? If you have:

font-family: "STIX", "STIX-Math", sans-serif;

since you are embedding the two fonts, only the first will be used...