Skip to content

TypeError: Cannot read properties of null (reading 'xCoordinate') when rendering specific Gujarati ligature ("અં", "આં") #3432

Description

@anuragkumar-git

Description
When attempting to render the specific Gujarati character combination "અં" (the letter "અ" combined with the Anusvara "ં") and "આં" (the letter "અ" combined with the Anusvara "ં" and with a vowel sign કાનો / Matra: ા attached), the layout engine crashes with a TypeError regarding xCoordinate. Because they share the exact same root glyph structure in the font's geometry, whatever math is breaking in the fontkit layout engine for "અ + ં" is carrying over to "આ + ં".

This issue seems highly specific to this exact glyph combination. If the Anusvara ("ં") or a vowel sign કાનો / Matra: ા is attached to any other Gujarati letter (e.g., "કં", "ચં"), the text renders perfectly. If the Anusvara and a vowel sign કાનો / Matra: ા with Anusvara ("ં") is removed from "અ" (leaving just "અ"), it also renders perfectly.

This occurs when using the static NotoSansGujarati-Regular.ttf font from Google Fonts.

Steps to reproduce:

1 Register a static Gujarati font (e.g., NotoSansGujarati-Regular.ttf).

2 Attempt to render a <Text> component containing the string "અં", "આં" or any word containing it (like "અંગરક્ષક").

3 The renderer will immediately crash during the layout phase.

Expected behavior:
The text engine should successfully calculate the bounding box and shape the "અં" or "આં" ligature without throwing a null reference error, as it does for other Gujarati characters.

Actual behavior:
The application crashes with the following error:

TypeError: Cannot read properties of null (reading 'xCoordinate')
    at ... (stack trace pointing to fontkit/textkit layout engine)

Environment:

  • @react-pdf/renderer version: 4.5.1

  • React version: 18.3.1

  • OS: Windows 11

  • Environment: Browser (Chrome)

Minimal Reproduction Code Snippet
Note for maintainers: You must include NotoSansGujarati-Regular.ttf in your public/assets folder to reproduce this.

import React from 'react';
import { Document, Page, Text, View, StyleSheet, Font } from '@react-pdf/renderer';

// Registering the static font from Google Fonts
Font.register({
  family: 'NotoGujarati',
  src: '/fonts/NotoSansGujarati-Regular.ttf', 
});

const styles = StyleSheet.create({
  page: {
    fontFamily: 'NotoGujarati',
    padding: 30,
  }
});

export const GujaratiBugReproduction = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        
        {/* THIS WORKS FINE (Different letter with Anusvara) */}
        <View><Text>કં</Text></View>
        
        {/* THIS WORKS FINE (The letter without the Anusvara) */}
        <View><Text></Text></View>

        {/* THIS CRASHES THE RENDERER (The exact bug trigger) */}
        <View><Text>અં</Text></View>

       {/* THIS CRASHES THE RENDERER (The exact bug trigger) */}
        <View><Text>આં</Text></View>


        {/* THIS ALSO CRASHES (The bug trigger within a word) */}
        <View><Text>અંગરક્ષક</Text></View>

      </Page>
    </Document>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions