diegomura / diegomura/react-pdf

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

Open
#3,432 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**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 `` 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:

```txt
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.

```JavaScript
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 (



{/* THIS WORKS FINE (Different letter with Anusvara) */}
કં

{/* THIS WORKS FINE (The letter without the Anusvara) */}

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

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

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



);
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.