Buggy Hebrew Unicode Characters -- sometimes cause app crash

[rneiss]

Description

Current versions of React Native (at least 0.39.2 and below) don't appear to properly display Hebrew Unicode Characters when cantillation markers (u0591-u05AF) are included under certain conditions.

This appears when using fonts that properly display these characters (Taamey Frank, Ezra SIL, SBL Hebrew, Shofar, Keter YG, etc)

It does not appear to occur with fonts that incorrectly place these characters.

Reproduction

This sample project demonstrates the issue in the most vanilla way possible (not possible to reproduce on rnplay.org) due to font requirements:

https://github.com/rneiss/hebrewTestProject/

Tested in simulator on iPhone7 Plus (10.2) but bug has been seen on other iOS devices.

Solution

Glyphs should render properly instead of producing unicode question marks.

Additional Information

• React Native version: 0.39.2 (and below)
• Platform: iOS

[nsantacruz]

This is also a pressing issue for our development team. Does anyone have any ideas?

[rneiss]

Stack Trace from some of the crashing:

* thread #32: tid = 0x13cf06b, 0x00000001100e6b8e CoreText`TJustEngine::ComputeMultiplyingFactors(CFRange, double, Distribution, unsigned long, TInlineVector<JustLeftRightMaxima, 30ul>&) + 162, queue = 'com.facebook.react.ShadowQueue', stop reason = EXC_BAD_ACCESS (code=1, address=0x7000084af8a0)
    frame #0: 0x00000001100e6b8e CoreText`TJustEngine::ComputeMultiplyingFactors(CFRange, double, Distribution, unsigned long, TInlineVector<JustLeftRightMaxima, 30ul>&) + 162
    frame #1: 0x00000001100e626f CoreText`TJustEngine::DistributeGap(std::__1::__wrap_iter<CTRun**>, std::__1::__wrap_iter<CTRun**>, CFRange, double, Distribution, unsigned long, TInlineVector<JustLeftRightMaxima, 30ul>&, std::__1::pair<double, double>&) + 65
    frame #2: 0x00000001100e674c CoreText`TJustEngine::CreateJustifiedLine(TLine const&, double, double, unsigned long) + 668
    frame #3: 0x000000011008d00b CoreText`CTLineCreateJustifiedLineWithOptions + 84
    frame #4: 0x0000000113e4aee9 UIFoundation`-[NSATSLineFragment justifyWithFactor:] + 126
    frame #5: 0x0000000113e3d91b UIFoundation`-[NSATSTypesetter _layoutLineFragmentStartingWithGlyphAtIndex:characterIndex:atPoint:renderingContext:] + 5507
    frame #6: 0x0000000113e3ec6a UIFoundation`-[NSATSTypesetter layoutParagraphAtPoint:] + 157
    frame #7: 0x0000000113e9f082 UIFoundation`-[NSTypesetter _layoutGlyphsInLayoutManager:startingAtGlyphIndex:maxNumberOfLineFragments:maxCharacterIndex:nextGlyphIndex:nextCharacterIndex:] + 3478
    frame #8: 0x0000000113ea0bae UIFoundation`-[NSTypesetter layoutCharactersInRange:forLayoutManager:maximumNumberOfLineFragments:] + 245
    frame #9: 0x0000000113e3f6f8 UIFoundation`-[NSATSTypesetter layoutCharactersInRange:forLayoutManager:maximumNumberOfLineFragments:] + 492
    frame #10: 0x0000000113e279ef UIFoundation`-[NSLayoutManager(NSPrivate) _fillLayoutHoleForCharacterRange:desiredNumberOfLines:isSoft:] + 1075
    frame #11: 0x0000000113e29638 UIFoundation`-[NSLayoutManager(NSPrivate) _fillLayoutHoleAtIndex:desiredNumberOfLines:] + 201
    frame #12: 0x0000000113e3917b UIFoundation`_NSFastFillAllLayoutHolesUpToEndOfContainerForGlyphIndex + 1179
    frame #13: 0x0000000113e66bb1 UIFoundation`-[NSLayoutManager ensureLayoutForTextContainer:] + 342
  * frame #14: 0x0000000107c56b93 ReaderApp`-[RCTShadowText buildTextStorageForWidth:widthMode:](self=0x00007fc90556e3a0, _cmd="buildTextStorageForWidth:widthMode:", width=315, widthMode=CSSMeasureModeExactly) + 691 at RCTShadowText.m:213
    frame #15: 0x0000000107c5545f ReaderApp`RCTMeasure(node=0x00007fc90556e570, width=315, widthMode=CSSMeasureModeExactly, height=NaN, heightMode=CSSMeasureModeUndefined) + 79 at RCTShadowText.m:44
    frame #16: 0x0000000107bba89f ReaderApp`setMeasuredDimensionsForNodeWithMeasureFunc(node=0x00007fc90556e570, availableWidth=315, availableHeight=NaN, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeUndefined) + 399 at CSSLayout.c:1231
    frame #17: 0x0000000107bb7853 ReaderApp`layoutNodeImpl(node=0x00007fc90556e570, availableWidth=315, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false) + 275 at CSSLayout.c:1442
    frame #18: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90556e570, availableWidth=315, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #19: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc90556e0b0, child=0x00007fc90556e570, width=315, widthMode=CSSMeasureModeExactly, height=NaN, heightMode=CSSMeasureModeUndefined, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #20: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc90556e0b0, availableWidth=315, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false) + 1442 at CSSLayout.c:1541
    frame #21: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90556e0b0, availableWidth=315, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false, reason="flex") + 1564 at CSSLayout.c:2474
    frame #22: 0x0000000107bb89cc ReaderApp`layoutNodeImpl(node=0x00007fc90556d610, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false) + 4748 at CSSLayout.c:1857
    frame #23: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90556d610, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #24: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc90556d320, child=0x00007fc90556d610, width=375, widthMode=CSSMeasureModeAtMost, height=NaN, heightMode=CSSMeasureModeUndefined, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #25: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc90556d320, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false) + 1442 at CSSLayout.c:1541
    frame #26: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90556d320, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #27: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc9055c0cb0, child=0x00007fc90556d320, width=375, widthMode=CSSMeasureModeAtMost, height=NaN, heightMode=CSSMeasureModeUndefined, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #28: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc9055c0cb0, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false) + 1442 at CSSLayout.c:1541
    frame #29: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc9055c0cb0, availableWidth=375, availableHeight=NaN, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeUndefined, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #30: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc905499530, child=0x00007fc9055c0cb0, width=375, widthMode=CSSMeasureModeAtMost, height=591, heightMode=CSSMeasureModeAtMost, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #31: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc905499530, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeAtMost, performLayout=false) + 1442 at CSSLayout.c:1541
    frame #32: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc905499530, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeAtMost, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #33: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc905499240, child=0x00007fc905499530, width=375, widthMode=CSSMeasureModeAtMost, height=591, heightMode=CSSMeasureModeAtMost, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #34: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc905499240, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeAtMost, performLayout=false) + 1442 at CSSLayout.c:1541
    frame #35: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc905499240, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeAtMost, heightMeasureMode=CSSMeasureModeAtMost, performLayout=false, reason="measure") + 1564 at CSSLayout.c:2474
    frame #36: 0x0000000107bbb336 ReaderApp`computeChildFlexBasis(node=0x00007fc905498f50, child=0x00007fc905499240, width=375, widthMode=CSSMeasureModeExactly, height=591, heightMode=CSSMeasureModeExactly, direction=CSSDirectionLTR) + 1350 at CSSLayout.c:1065
    frame #37: 0x0000000107bb7ce2 ReaderApp`layoutNodeImpl(node=0x00007fc905498f50, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 1442 at CSSLayout.c:1541
    frame #38: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc905498f50, availableWidth=375, availableHeight=591, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="stretch") + 1564 at CSSLayout.c:2474
    frame #39: 0x0000000107bb92ec ReaderApp`layoutNodeImpl(node=0x00007fc9055ba5c0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 7084 at CSSLayout.c:2057
    frame #40: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc9055ba5c0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="stretch") + 1564 at CSSLayout.c:2474
    frame #41: 0x0000000107bb92ec ReaderApp`layoutNodeImpl(node=0x00007fc90540a7b0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 7084 at CSSLayout.c:2057
    frame #42: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90540a7b0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="stretch") + 1564 at CSSLayout.c:2474
    frame #43: 0x0000000107bb92ec ReaderApp`layoutNodeImpl(node=0x00007fc905602710, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 7084 at CSSLayout.c:2057
    frame #44: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc905602710, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="stretch") + 1564 at CSSLayout.c:2474
    frame #45: 0x0000000107bb92ec ReaderApp`layoutNodeImpl(node=0x00007fc90543d5c0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 7084 at CSSLayout.c:2057
    frame #46: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc90543d5c0, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionLTR, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="stretch") + 1564 at CSSLayout.c:2474
    frame #47: 0x0000000107bb92ec ReaderApp`layoutNodeImpl(node=0x00007fc905409c40, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionInherit, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true) + 7084 at CSSLayout.c:2057
    frame #48: 0x0000000107bb733c ReaderApp`layoutNodeInternal(node=0x00007fc905409c40, availableWidth=375, availableHeight=667, parentDirection=CSSDirectionInherit, widthMeasureMode=CSSMeasureModeExactly, heightMeasureMode=CSSMeasureModeExactly, performLayout=true, reason="initial") + 1564 at CSSLayout.c:2474
    frame #49: 0x0000000107bb9ec9 ReaderApp`CSSNodeCalculateLayout(node=0x00007fc905409c40, availableWidth=NaN, availableHeight=NaN, parentDirection=CSSDirectionInherit) + 473 at CSSLayout.c:2594
    frame #50: 0x0000000107b37b1a ReaderApp`-[RCTRootShadowView collectViewsWithUpdatedFrames](self=0x00006100001c4380, _cmd="collectViewsWithUpdatedFrames") + 90 at RCTRootShadowView.m:52
    frame #51: 0x0000000107bf46ce ReaderApp`-[RCTUIManager uiBlockWithLayoutUpdateForRootView:](self=0x00006000000a71a0, _cmd="uiBlockWithLayoutUpdateForRootView:", rootShadowView=0x00006100001c4380) + 398 at RCTUIManager.m:539
    frame #52: 0x0000000107bfde45 ReaderApp`-[RCTUIManager _layoutAndMount](self=0x00006000000a71a0, _cmd="_layoutAndMount") + 917 at RCTUIManager.m:1138
    frame #53: 0x0000000107bfda9b ReaderApp`-[RCTUIManager batchDidComplete](self=0x00006000000a71a0, _cmd="batchDidComplete") + 43 at RCTUIManager.m:1119
    frame #54: 0x0000000107b9c121 ReaderApp`__36-[RCTBatchedBridge batchDidComplete]_block_invoke((null)=<unavailable>) + 65 at RCTBatchedBridge.m:1028
    frame #55: 0x000000010dc3a978 libdispatch.dylib`_dispatch_call_block_and_release + 12
    frame #56: 0x000000010dc640cd libdispatch.dylib`_dispatch_client_callout + 8
    frame #57: 0x000000010dc41e17 libdispatch.dylib`_dispatch_queue_serial_drain + 236
    frame #58: 0x000000010dc42b4b libdispatch.dylib`_dispatch_queue_invoke + 1073
    frame #59: 0x000000010dc45385 libdispatch.dylib`_dispatch_root_queue_drain + 720
    frame #60: 0x000000010dc45059 libdispatch.dylib`_dispatch_worker_thread3 + 123
    frame #61: 0x000000010dfba746 libsystem_pthread.dylib`_pthread_wqthread + 1299
    frame #62: 0x000000010dfba221 libsystem_pthread.dylib`start_wqthread + 13

[AdilSoomro]

Do you've any updates on this. I also stumbled upon this error. I've been facing this with Urdu characters, with certain custom font ie Jameel Noori Nastaleeq.

It is CoreText error while creating justified lines. I've following line from CoreText which causes this error:

CTLineRef line = CTTypesetterCreateLine(self.typesetter, CFRangeMake(startIndex, lineCharacterCount));
CTLineRef justifiedLine = CTLineCreateJustifiedLine(line, 1.0, boundsWidth);

and the text that can cause this error is:

رہگزر نہ

It has something to do with Kerning of the characters. Somehow CoreText fails to estimate the spacing for the characters in a justified line. Native UITextView tries to recover from it in justified mode. But custom glyphs drawing using CoreText fails.

If an attempt is made to set the above mentioned font to UITextView containing this specific text in InterfaceBuilder, it causes the Xcode to crash.

The native TextEditor app on Mac also goes bananas when it finds the above mentioned text in any paragraph in that certain font.

[rneiss]

That summarizes the problem perfectly.

In the end we couldn't find a code solution forward on this so we ended up modifying the font we were using -- essentially using fontforge we created a bunch of custom ligature glyphs in the private use area of the unicode block and called those, effectively bypassing all the various positioning kerning rules that seemed to be mucking up RN.

You can see the work we did by comparing these two files in font forge or the equivalent:

• original font
• modified font

If you manage to find another path forward do let us know.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.