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:
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>
);
};
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
TypeErrorregardingxCoordinate. Because they share the exact same root glyph structure in the font's geometry, whatever math is breaking in thefontkitlayout 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.ttffont 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/rendererversion:4.5.1React version:
18.3.1OS:
Windows 11Environment:
Browser (Chrome)Minimal Reproduction Code Snippet
Note for maintainers: You must include
NotoSansGujarati-Regular.ttfin your public/assets folder to reproduce this.