diegomura / diegomura/react-pdf
TypeError: Cannot read properties of null (reading 'xCoordinate') when rendering specific Gujarati ligature ("અં", "આં")
- 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
Assessment
This issue has not been assessed yet.