Missing glyphs causing rendering to blow up instead of using a default

[DuncanMacWeb]

OS: MacOS

React-pdf version: 1.0.0-alpha.25

Description: Rendering blows up if text is passed in containing glyphs that are not in the font provided. Potential solutions:

• provide a hook which could catch/log these errors or return a fallback glyph to use — it’s ugly, but as a default, that square that you sometimes see for unknown characters would be better than blowing up completely.
• provide character set subsetting by allowing a unicode-rangeto be passed to Font.register similar to what’s possible with @font-face on the web — as that link says, it would allow the user to register a separate font file for each Unicode language subset (e.g. Latin, Greek, Hindi, ...) and react-pdf would only download the file if it were needed to render the glyphs on the page.

How to replicate issue including code snippet (if applies): Passing glyphs outside the subset in the WOFF font we’re using results in the following error (very similar to the one in #284, but I think the cause is different):

http://www.local.dev/pdf erroring out with

Uncaught (in promise) TypeError: Cannot read property 'layout' of null
    at GlyphGenerator.js:63
    at Array.map (<anonymous>)
    at GlyphGenerator.generateGlyphs (GlyphGenerator.js:61)
    at LayoutEngine$$1.layoutParagraph (LayoutEngine.js:111)
    at LayoutEngine$$1.layoutColumn (LayoutEngine.js:92)
    at LayoutEngine$$1.layout (LayoutEngine.js:80)
    at Text.layoutText (react-pdf.browser.es.js:3899)
    at Text.measureText (react-pdf.browser.es.js:3914)
    at External.data (entry-common.js:221)
    at Array.eval (eval at buildJSCallerFunction (nbind.js:1449), <anonymous>:1:86)

We have identified that only a small subset of glyphs is causing this error, mostly Greek glyphs used in mathematical/scientific prose and formulae.

For sure, subsetting our font differently to include the missing glyphs is an option, but we’d like to find a solution that’s more resilient to random content from unexpected character sets.

Where would be the best place to start with a PR to fix this?

[DuncanMacWeb]

Update: I tried resolving this by specifying multiple font families in the style declaration:

Font.register(`http://server/MainFont-Regular.woff`, { family: 'MainFont' });
Font.register(`http://server/FallbackFont-Regular.woff`, { family: 'FallbackFont' });

const StyledText = styled.Text`
  font-family: MainFont, FallbackFont;
`;

ReactDOM.render((
  <PDFViewer>
    <Document>
      <Page>
        <StyledText>
          Content from α to ω
        </StyledText>
      </Page>
    <Document>
  </PDFViewer>
), document.getElementById('react-root'));

but am getting a new and interesting error:

Error: Unexpected token type: div
    at TokenStream._throw (react-reconciler.production.min.js:formatted:1)
    at TokenStream.expect (react-reconciler.production.min.js:formatted:1)
    at Object.parseFontFamily [as fontFamily] (react-reconciler.production.min.js:formatted:1)
    at baseTransformShorthandValue (react-reconciler.production.min.js:formatted:1)
    at getStylesForProperty (react-reconciler.production.min.js:formatted:1)
    at react-reconciler.production.min.js:formatted:1
    at Array.reduce (<anonymous>)
    at index (react-reconciler.production.min.js:formatted:1)
    at InlineStyle.generateStyleObject (react-reconciler.production.min.js:formatted:1)
    at StyledNativeComponent.generateAndInjectStyles (react-reconciler.production.min.js:formatted:1)

[diegomura]

Seems you have div element getting in the pdf rendering tree maybe? Cannot tell from the example, but passing several font-families is not something that's supported

[diegomura]

Hey.
I was looking closer at this issue, and I wanted to point out some things:

• WOFF fonts are not supported yet. Cannot read property 'layout' of null doesn't stand for missing glyphs, but the font being unknown
• We are computing a fallback for missing glyphs

Please consider opening an issue for the first point, and also one for providing several font-families. But if you don't mind I'll close this one because it's not a real issue