basalt-appkit 0.0.0-rc5 → 0.1.0

package/native/appkit/CoreTextLayout.mm

@@ -1,6 +1,14 @@
 #import "CoreTextLayout.h"
 
+#include "TextAlignments.h"
+#include "TextDirection.h"
+#include "WritingDirections.h"
+
 #include "FontRegistry.h"
+#include "FontScaling.h"
+#include "FontVariants.h"
+#include "TextColors.h"
+#include "TextDecorations.h"
 
 #include <react/renderer/graphics/Color.h>
 
@@ -52,45 +60,82 @@ CGFloat toCoreTextWeight(FontWeight weight) {
   return NSFontWeightRegular;
 }
 
-NSTextAlignment toTextAlignment(TextAlignment alignment) {
+// An edge, spelled as AppKit spells it. The relative alignments are gone by
+// here -- core/TextAlignments.h resolved them against the paragraph's direction
+// -- so what arrives is one of four.
+//
+// `NSTextAlignmentNatural` is deliberately not in the answers: it is the style
+// default and stays in place for a paragraph that asked for `natural` or asked
+// for nothing, which is what lets an `NSTextField` resolve a field's own
+// direction. Folding `left` into it is what made `textAlign: 'left'` draw
+// flush right in a right-to-left paragraph.
+NSTextAlignment toTextAlignment(basalt::PhysicalTextAlignment alignment) {
   switch (alignment) {
-    case TextAlignment::Center:
+    case basalt::PhysicalTextAlignment::Center:
       return NSTextAlignmentCenter;
-    case TextAlignment::Right:
-#if BASALT_RN_MINOR >= 87
-    case TextAlignment::End:
-#endif
+    case basalt::PhysicalTextAlignment::Right:
       return NSTextAlignmentRight;
-    case TextAlignment::Justified:
+    case basalt::PhysicalTextAlignment::Justified:
       return NSTextAlignmentJustified;
-    case TextAlignment::Left:
-#if BASALT_RN_MINOR >= 87
-    case TextAlignment::Start:
-#endif
-    case TextAlignment::Natural:
+    case basalt::PhysicalTextAlignment::Left:
       break;
   }
-  return NSTextAlignmentNatural;
+  return NSTextAlignmentLeft;
 }
 
-NSColor *toColor(const facebook::react::SharedColor &color) {
-  const auto components = facebook::react::colorComponentsFromColor(color);
-  // sRGB explicitly, for the same reason RnAppKitView builds its background
-  // that way: a device colour space shifts every colour on a wide-gamut
-  // display, and text that does not match Linux is the bug this project is
-  // least able to afford.
-  return [NSColor colorWithSRGBRed:components.red
-                             green:components.green
-                              blue:components.blue
-                             alpha:components.alpha];
+// A colour core resolved, in sRGB. Explicitly sRGB for the same reason
+// RnAppKitView builds its background that way: a device colour space shifts
+// every colour on a wide-gamut display, and text that does not match Linux is
+// the bug this project is least able to afford.
+NSColor *toColor(const basalt::TextColor &color) {
+  return [NSColor colorWithSRGBRed:color.red
+                             green:color.green
+                              blue:color.blue
+                             alpha:color.alpha];
 }
 
-NSFont *fontFor(const TextAttributes &textAttributes) {
-  float size = isSet(textAttributes.fontSize) ? static_cast<float>(textAttributes.fontSize)
-                                              : kDefaultFontSize;
-  if (isSet(textAttributes.fontSizeMultiplier) && textAttributes.fontSizeMultiplier > 0) {
-    size *= static_cast<float>(textAttributes.fontSizeMultiplier);
+// React Native's five decoration styles against Core Text's bitmask.
+//
+// A style and a pattern are OR'd into one value: `NSUnderlineStyleSingle` with
+// `NSUnderlineStylePatternDot` is the dotted line CSS means. There is no wavy
+// pattern -- the squiggle under a misspelling is drawn by the text system's
+// spell checking and not by an underline style -- so `wavy` falls back to a
+// single line here and is exact on GTK, which is the opposite way round from
+// dotted and dashed. core/TextDecorations.h says why falling back beats
+// refusing, and backlog/text.md records both gaps.
+NSUnderlineStyle toUnderlineStyle(facebook::react::TextDecorationStyle style) {
+  switch (style) {
+    case facebook::react::TextDecorationStyle::Double:
+      return NSUnderlineStyleDouble;
+    case facebook::react::TextDecorationStyle::Dotted:
+      return static_cast<NSUnderlineStyle>(NSUnderlineStyleSingle | NSUnderlineStylePatternDot);
+    case facebook::react::TextDecorationStyle::Dashed:
+      return static_cast<NSUnderlineStyle>(NSUnderlineStyleSingle | NSUnderlineStylePatternDash);
+#if BASALT_RN_MINOR >= 87
+    // `wavy` arrived in 0.87; 0.86's enum has four members and naming the
+    // fifth does not compile there. The squiggle itself is drawn rather than
+    // asked for, which is why this falls through to a single line: see
+    // RnWavyUnderlineAttributeName.
+    case facebook::react::TextDecorationStyle::Wavy:
+#endif
+    case facebook::react::TextDecorationStyle::Solid:
+      return NSUnderlineStyleSingle;
   }
+  return NSUnderlineStyleSingle;
+}
+
+NSFont *fontFor(const TextAttributes &textAttributes, basalt::FontFit fit = {}) {
+  // Through core/FontScaling.h, which is where `allowFontScaling` and
+  // `maxFontSizeMultiplier` are honoured. macOS reports no text scale to honour
+  // -- see appKitTextScale() -- so on this host those two props can only clamp
+  // a multiplier something else set, and the test that proves they are read
+  // supplies one with BASALT_TEST_FONT_SCALE.
+  // `adjustsFontSizeToFit` last, over the size those props resolved to:
+  // shrinking to fit is about the size the text would otherwise have been,
+  // including the desktop's own scale. A paragraph that never asked carries a
+  // ratio of 1 and this changes nothing.
+  const float size = static_cast<float>(fit.apply(
+      basalt::effectiveFontSize(textAttributes, kDefaultFontSize, basalt::systemFontScale())));
 
   const CGFloat weight = textAttributes.fontWeight ? toCoreTextWeight(*textAttributes.fontWeight)
                                                    : NSFontWeightRegular;
@@ -133,14 +178,55 @@ NSFont *fontFor(const TextAttributes &textAttributes) {
     }
   }
 
+  // `fontVariant`, which on this platform is a font and not an attribute: Core
+  // Text asks for features on the descriptor, so the font has to be rebuilt.
+  // Last, so the features are added to whatever family and slant was settled
+  // on above.
+  NSArray *const features = fontFeaturesFor(textAttributes);
+  if (features.count > 0) {
+    NSFontDescriptor *featured = [font.fontDescriptor fontDescriptorByAddingAttributes:@{
+      NSFontFeatureSettingsAttribute : features,
+    }];
+    NSFont *varied = [NSFont fontWithDescriptor:featured size:size];
+    if (varied != nil) {
+      font = varied;
+    }
+  }
+
   return font;
 }
 
-NSParagraphStyle *paragraphStyleFor(const TextAttributes &textAttributes) {
+NSParagraphStyle *paragraphStyleFor(const TextAttributes &textAttributes,
+                                    basalt::TextDirections directions) {
   NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
 
-  if (textAttributes.alignment) {
-    style.alignment = toTextAlignment(*textAttributes.alignment);
+  // `natural` is left alone rather than resolved here: it is this style's own
+  // default, and leaving it is what lets a frame -- or an NSTextField, which
+  // has its own text and its own direction -- resolve it. RnTextLayout resolves
+  // it for the paragraph path, where no frame is used; see its `rightToLeft`.
+  if (textAttributes.alignment && *textAttributes.alignment != TextAlignment::Natural) {
+    style.alignment =
+        toTextAlignment(basalt::physicalTextAlignment(*textAttributes.alignment, directions));
+  }
+
+  // `baseWritingDirection`, which is the same call upstream's iOS half makes in
+  // `RCTAttributedTextUtils.mm`. `Natural` is the paragraph style's own default
+  // and means the Unicode bidi algorithm decides from the first strong
+  // character, so it is set explicitly rather than skipped: a nested <Text>
+  // inherits this style, and leaving it unset would let the enclosing
+  // paragraph's direction stand where the app asked for the natural one.
+  if (textAttributes.baseWritingDirection) {
+    switch (*textAttributes.baseWritingDirection) {
+      case facebook::react::WritingDirection::Natural:
+        style.baseWritingDirection = NSWritingDirectionNatural;
+        break;
+      case facebook::react::WritingDirection::LeftToRight:
+        style.baseWritingDirection = NSWritingDirectionLeftToRight;
+        break;
+      case facebook::react::WritingDirection::RightToLeft:
+        style.baseWritingDirection = NSWritingDirectionRightToLeft;
+        break;
+    }
   }
 
   // React Native's lineHeight is the total line box height, and setting both
@@ -153,9 +239,11 @@ NSParagraphStyle *paragraphStyleFor(const TextAttributes &textAttributes) {
     style.maximumLineHeight = lineHeight;
   }
 
-  // Wrapping, always. The line *limit* is applied in RnTextLayout, not here:
-  // a truncating line break mode would make Core Text ellipsize each line it
-  // lays out rather than the last one kept.
+  // Wrapping, always, *in the style*. The line limit and the cut are applied
+  // in RnTextLayout rather than here: a truncating line break mode on the
+  // paragraph style would make Core Text ellipsize each line it lays out
+  // rather than the last one kept. `lineBreakMode` is honoured where that
+  // limit is set, in buildTextLayout below.
   style.lineBreakMode = NSLineBreakByWordWrapping;
 
   return style;
@@ -163,55 +251,257 @@ NSParagraphStyle *paragraphStyleFor(const TextAttributes &textAttributes) {
 
 } // namespace
 
-NSDictionary<NSAttributedStringKey, id> *buildTextAttributes(const TextAttributes &textAttributes) {
+float appKitTextScale() { return 1.0F; }
+
+// `fontVariant` in Core Text's vocabulary, which is not OpenType's.
+//
+// Pango and DirectWrite take the four-character tags core/FontVariants.h hands
+// out; Core Text takes Apple's older AAT pair, a feature type and a selector
+// inside it. This is upstream's own table, from `RCTFontFeatures` in
+// RCTFontUtils.mm, which is where to look if a variant ever renders differently
+// from iOS.
+//
+// The twenty stylistic alternates are a formula rather than twenty entries: the
+// on-selectors run 2, 4, 6 and so on, which the suite asserts against the SDK's
+// own `kStylisticAltOneOnSelector` and `kStylisticAltTwentyOnSelector` rather
+// than taking this comment's word for it.
+NSArray *fontFeaturesFor(const TextAttributes &textAttributes) {
+  NSMutableArray *features = [NSMutableArray array];
+  for (const auto variant : basalt::fontVariants(textAttributes)) {
+    int type = 0;
+    int selector = 0;
+    switch (variant) {
+      case facebook::react::FontVariant::SmallCaps:
+        type = kLowerCaseType;
+        selector = kLowerCaseSmallCapsSelector;
+        break;
+      case facebook::react::FontVariant::OldstyleNums:
+        type = kNumberCaseType;
+        selector = kLowerCaseNumbersSelector;
+        break;
+      case facebook::react::FontVariant::LiningNums:
+        type = kNumberCaseType;
+        selector = kUpperCaseNumbersSelector;
+        break;
+      case facebook::react::FontVariant::TabularNums:
+        type = kNumberSpacingType;
+        selector = kMonospacedNumbersSelector;
+        break;
+      case facebook::react::FontVariant::ProportionalNums:
+        type = kNumberSpacingType;
+        selector = kProportionalNumbersSelector;
+        break;
+      case facebook::react::FontVariant::Default:
+        continue;
+      default: {
+        // A stylistic alternate, which the tag says which of: `ss07` is the
+        // seventh, and its on-selector is twice that.
+        const char *const tag = basalt::openTypeTag(variant);
+        if (tag == nullptr || tag[0] != 's' || tag[1] != 's') {
+          continue;
+        }
+        const int number = (tag[2] - '0') * 10 + (tag[3] - '0');
+        type = kStylisticAlternativesType;
+        selector = number * 2;
+        break;
+      }
+    }
+    [features addObject:@{
+      NSFontFeatureTypeIdentifierKey : @(type),
+      NSFontFeatureSelectorIdentifierKey : @(selector),
+    }];
+  }
+  return features;
+}
+
+NSDictionary<NSAttributedStringKey, id> *buildTextAttributes(const TextAttributes &textAttributes,
+                                                            basalt::FontFit fit,
+                                                            basalt::TextDirections directions) {
   NSMutableDictionary<NSAttributedStringKey, id> *attributes = [NSMutableDictionary dictionary];
 
-  attributes[NSFontAttributeName] = fontFor(textAttributes);
-  attributes[NSParagraphStyleAttributeName] = paragraphStyleFor(textAttributes);
+  attributes[NSFontAttributeName] = fontFor(textAttributes, fit);
+  attributes[NSParagraphStyleAttributeName] = paragraphStyleFor(textAttributes, directions);
 
-  if (textAttributes.foregroundColor) {
-    attributes[NSForegroundColorAttributeName] = toColor(textAttributes.foregroundColor);
-  } else {
-    // React Native's default is opaque black, not the system label colour --
-    // which is white in dark mode and would make default text invisible on a
-    // light background, or vice versa. Matching React Native rather than the
-    // platform is the right call here: the same app has to look the same on
-    // Linux.
-    attributes[NSForegroundColorAttributeName] = [NSColor colorWithSRGBRed:0 green:0 blue:0 alpha:1];
-  }
+  // The foreground, with `opacity` multiplied in, and React Native's default of
+  // opaque black rather than the system label colour -- which is white in dark
+  // mode and would make default text invisible on a light background. Both
+  // rules are core/TextColors.h's now, so GTK cannot drift from them.
+  attributes[NSForegroundColorAttributeName] =
+      toColor(basalt::textForegroundColor(textAttributes));
 
-  if (textAttributes.backgroundColor) {
-    attributes[NSBackgroundColorAttributeName] = toColor(textAttributes.backgroundColor);
+  if (const auto background = basalt::textBackgroundColor(textAttributes)) {
+    attributes[NSBackgroundColorAttributeName] = toColor(*background);
   }
 
   if (isSet(textAttributes.letterSpacing)) {
     attributes[NSKernAttributeName] = @(static_cast<CGFloat>(textAttributes.letterSpacing));
   }
 
-  if (textAttributes.textDecorationLineType) {
-    switch (*textAttributes.textDecorationLineType) {
-      case TextDecorationLineType::Underline:
-        attributes[NSUnderlineStyleAttributeName] = @(NSUnderlineStyleSingle);
-        break;
-      case TextDecorationLineType::Strikethrough:
-        attributes[NSStrikethroughStyleAttributeName] = @(NSUnderlineStyleSingle);
-        break;
-      case TextDecorationLineType::UnderlineStrikethrough:
-        attributes[NSUnderlineStyleAttributeName] = @(NSUnderlineStyleSingle);
-        attributes[NSStrikethroughStyleAttributeName] = @(NSUnderlineStyleSingle);
-        break;
-      case TextDecorationLineType::None:
-        break;
+  // Which lines, in which colour, in which style: resolved in
+  // core/TextDecorations.h so both hosts agree about what was asked for, and
+  // mapped here to Core Text's one bitmask.
+  if (const auto decoration = basalt::textDecoration(textAttributes)) {
+    const NSUnderlineStyle style = toUnderlineStyle(decoration->style);
+#if BASALT_RN_MINOR >= 87
+    const bool wavy = decoration->style == facebook::react::TextDecorationStyle::Wavy;
+#else
+    // 0.86's enum has no `wavy`, so nothing can ask for one there.
+    const bool wavy = false;
+#endif
+    if (decoration->underline && wavy) {
+      // Core Text has no wavy pattern, so asking for an underline here would
+      // draw a straight line through the squiggle the layout is about to
+      // stroke. The colour travels on the attribute: the decoration's when the
+      // app named one, and the text's own otherwise, which is what every
+      // undecorated underline does. See RnWavyUnderlineAttributeName.
+      NSColor *lineColor = decoration->hasColor
+          ? toColor(basalt::TextColor{decoration->red, decoration->green, decoration->blue,
+                                      decoration->alpha})
+          : attributes[NSForegroundColorAttributeName];
+      attributes[RnWavyUnderlineAttributeName] =
+          lineColor != nil ? lineColor : [NSColor blackColor];
+    } else if (decoration->underline) {
+      attributes[NSUnderlineStyleAttributeName] = @(style);
+    }
+    if (decoration->strikethrough) {
+      // The same bitmask as an underline, which is one thing AppKit has over
+      // Pango here: a dotted strikethrough is a dotted strikethrough.
+      attributes[NSStrikethroughStyleAttributeName] = @(style);
+    }
+    if (decoration->hasColor) {
+      NSColor *const color = toColor(basalt::TextColor{
+          decoration->red, decoration->green, decoration->blue, decoration->alpha});
+      if (decoration->underline && !wavy) {
+        attributes[NSUnderlineColorAttributeName] = color;
+      }
+      if (decoration->strikethrough) {
+        attributes[NSStrikethroughColorAttributeName] = color;
+      }
     }
   }
 
   return attributes;
 }
 
+// The callbacks a run delegate answers with. CoreText asks for three numbers and
+// the box is anchored on the baseline, so the whole height is ascent and the
+// descent is zero, which puts the view sitting on the line rather than straddling
+// it. That matches the shape attribute on GTK, where the rect runs from -height
+// to 0.
+//
+// The context is a heap-allocated Size owned by the delegate: `dealloc` frees it,
+// and CoreText guarantees it is called once the delegate goes.
+CGFloat attachmentAscent(void *context) {
+  return static_cast<CGFloat>(static_cast<facebook::react::Size *>(context)->height);
+}
+
+CGFloat attachmentDescent(void * /*context*/) {
+  return 0;
+}
+
+CGFloat attachmentWidth(void *context) {
+  return static_cast<CGFloat>(static_cast<facebook::react::Size *>(context)->width);
+}
+
+void attachmentDealloc(void *context) {
+  delete static_cast<facebook::react::Size *>(context);
+}
+
+CTRunDelegateRef makeAttachmentDelegate(const facebook::react::Size &size) {
+  CTRunDelegateCallbacks callbacks = {};
+  callbacks.version = kCTRunDelegateCurrentVersion;
+  callbacks.dealloc = attachmentDealloc;
+  callbacks.getAscent = attachmentAscent;
+  callbacks.getDescent = attachmentDescent;
+  callbacks.getWidth = attachmentWidth;
+  return CTRunDelegateCreate(&callbacks, new facebook::react::Size{size});
+}
+
+// `textTransform`, applied before anything measures or draws the text.
+//
+// NSString's case mapping rather than a shared one, for the reason the GTK host
+// uses GLib's: Unicode case mapping is the toolkit's, and a byte-wise transform
+// would leave ß and every accented letter alone while looking right in English.
+// The two hosts are asserted against the same cases.
+//
+// `capitalize` is React Native's own rule, from RCTAttributedTextUtils.mm: split
+// on single spaces, and a word whose first character is not a digit is
+// capitalised -- which lowercases the rest of it, so "iOS" becomes "Ios". That
+// is surprising and is what the other platforms do.
+NSString *transformedFragmentText(const AttributedString::Fragment &fragment, NSString *text) {
+  const auto transform = fragment.textAttributes.textTransform;
+  if (!transform.has_value()) {
+    return text;
+  }
+  switch (*transform) {
+    case facebook::react::TextTransform::Uppercase:
+      return text.uppercaseString;
+    case facebook::react::TextTransform::Lowercase:
+      return text.lowercaseString;
+    case facebook::react::TextTransform::Capitalize: {
+      NSMutableArray<NSString *> *words = [NSMutableArray array];
+      for (NSString *word in [text componentsSeparatedByString:@" "]) {
+        if (word.length == 0) {
+          [words addObject:word];
+          continue;
+        }
+        NSRange first = [word rangeOfComposedCharacterSequenceAtIndex:0];
+        NSString *lead = [word substringWithRange:first];
+        const BOOL isDigit = [lead rangeOfCharacterFromSet:NSCharacterSet.decimalDigitCharacterSet]
+                                 .location != NSNotFound;
+        [words addObject:isDigit ? word.lowercaseString : word.capitalizedString];
+      }
+      return [words componentsJoinedByString:@" "];
+    }
+    case facebook::react::TextTransform::None:
+    case facebook::react::TextTransform::Unset:
+      break;
+  }
+  return text;
+}
+
+basalt::FontFit textFitScale(const AttributedString &attributedString,
+                             const ParagraphAttributes &paragraphAttributes,
+                             float maxWidth,
+                             float maxHeight) {
+  const basalt::FontFit limits = basalt::fontFitLimits(paragraphAttributes);
+  if (!paragraphAttributes.adjustsFontSizeToFit) {
+    return limits;
+  }
+
+  // Measured against the paragraph *without* its line limit, which is how this
+  // prop and `numberOfLines` work together. iOS tests whether the text was
+  // truncated; asking what the untruncated paragraph needs answers the same
+  // question with one layout instead of two, and is the reason a one-line
+  // button label shrinks rather than ellipsising.
+  ParagraphAttributes untruncated = paragraphAttributes;
+  untruncated.maximumNumberOfLines = 0;
+
+  return basalt::fontFitToBox(
+      limits,
+      [&](double ratio) {
+        basalt::FontFit probe = limits;
+        probe.ratio = ratio;
+        RnTextLayout *layout = buildTextLayout(attributedString, untruncated, probe);
+        const CGSize size = [layout sizeForWidth:maxWidth];
+        return basalt::FontFitBox{.width = size.width, .height = size.height};
+      },
+      basalt::FontFitBox{.width = maxWidth, .height = maxHeight});
+}
+
 RnTextLayout *buildTextLayout(const AttributedString &attributedString,
-                              const ParagraphAttributes &paragraphAttributes) {
+                              const ParagraphAttributes &paragraphAttributes,
+                              basalt::FontFit fit) {
   NSMutableAttributedString *string = [[NSMutableAttributedString alloc] init];
 
+  // Which way the paragraph runs, once for the whole of it: the prop when the
+  // app set one, and Unicode's rule P2 over the text when it said `natural` or
+  // said nothing. Every relative alignment needs it, and Core Text will not
+  // answer it here -- it resolves a direction inside a frame, and this layer
+  // draws its own lines. See core/TextDirection.h.
+  const basalt::TextDirections directions = basalt::paragraphDirections(attributedString);
+  const bool rightToLeft = directions.paragraph;
+
   for (const auto &fragment : attributedString.getFragments()) {
     if (fragment.string.empty()) {
       continue;
@@ -220,9 +510,29 @@ RnTextLayout *buildTextLayout(const AttributedString &attributedString,
     if (text == nil) {
       continue;
     }
-    [string appendAttributedString:[[NSAttributedString alloc]
-                                       initWithString:text
-                                           attributes:buildTextAttributes(fragment.textAttributes)]];
+    text = transformedFragmentText(fragment, text);
+
+    NSMutableDictionary *attributes =
+        [buildTextAttributes(fragment.textAttributes, fit, directions) mutableCopy];
+
+    // An inline `<View>`: one fragment holding U+FFFC, whose own size React
+    // Native has already measured into the fragment. A run delegate is
+    // CoreText's way to say "this character is this big", the counterpart of
+    // Pango's shape attribute on the other host. Without it the character
+    // reserves whatever the font gives a missing glyph and the view is reported
+    // at zero. See backlog/text.md.
+    if (fragment.isAttachment()) {
+      const auto &size = fragment.parentShadowView.layoutMetrics.frame.size;
+      if (size.width > 0 && size.height > 0) {
+        if (CTRunDelegateRef delegate = makeAttachmentDelegate(size)) {
+          attributes[(__bridge NSString *)kCTRunDelegateAttributeName] =
+              (__bridge_transfer id)delegate;
+        }
+      }
+    }
+
+    [string appendAttributedString:[[NSAttributedString alloc] initWithString:text
+                                                                  attributes:attributes]];
   }
 
   CTLineTruncationType truncation = kCTLineTruncationEnd;
@@ -243,10 +553,60 @@ RnTextLayout *buildTextLayout(const AttributedString &attributedString,
       break;
   }
 
-  return [RnTextLayout layoutWithAttributedString:string
-                             maximumNumberOfLines:paragraphAttributes.maximumNumberOfLines
-                                   truncationType:truncation
-                                        truncates:truncates ? YES : NO];
+  // `lineBreakMode`, which React Native's JavaScript spells `lineBreakModeIOS`
+  // and which this host had been ignoring: the paragraph style below sets
+  // word wrapping unconditionally, and Core Text takes its truncation from
+  // this layer rather than from the style. Four of the six modes are a cut
+  // rather than a wrap, and each names the end the ellipsis goes at.
+  //
+  // `numberOfLines` wins over it when an app set both, which is what iOS does:
+  // the count is that prop's question and the end to cut is this one's. `char`
+  // is the one mode left unhonoured -- wrapping between characters is the
+  // typesetter's business rather than the framesetter's -- and
+  // backlog/text.md records it.
+  NSInteger lineLimit = paragraphAttributes.maximumNumberOfLines;
+  const auto lineBreak = attributedString.getFragments().empty()
+      ? std::optional<facebook::react::LineBreakMode>{}
+      : attributedString.getFragments().front().textAttributes.lineBreakMode;
+  if (lineBreak.has_value()) {
+    bool cuts = true;
+    switch (*lineBreak) {
+      case facebook::react::LineBreakMode::Head:
+        truncation = kCTLineTruncationStart;
+        truncates = true;
+        break;
+      case facebook::react::LineBreakMode::Middle:
+        truncation = kCTLineTruncationMiddle;
+        truncates = true;
+        break;
+      case facebook::react::LineBreakMode::Tail:
+        truncation = kCTLineTruncationEnd;
+        truncates = true;
+        break;
+      case facebook::react::LineBreakMode::Clip:
+        truncates = false;
+        break;
+      case facebook::react::LineBreakMode::Char:
+      case facebook::react::LineBreakMode::Word:
+        cuts = false;
+        break;
+    }
+    if (cuts && lineLimit <= 0) {
+      lineLimit = 1;
+    }
+  }
+
+  RnTextLayout *layout =
+      [RnTextLayout layoutWithAttributedString:string
+                         maximumNumberOfLines:lineLimit
+                               truncationType:truncation
+                                    truncates:truncates ? YES : NO];
+  layout.rightToLeft = rightToLeft ? YES : NO;
+  // `textAlignVertical`, which is where the paragraph sits in a box taller than
+  // it is. Applied while drawing, the box being known only then.
+  layout.verticalFlush =
+      basalt::textVerticalFlushFactor(paragraphAttributes.textAlignVertical);
+  return layout;
 }
 
 } // namespace basalt

package/native/appkit/CoreTextLayoutManager.mm

@@ -99,7 +99,16 @@ TextMeasurement TextLayoutManager::measure(const AttributedStringBox &attributed
         ? -1.0
         : static_cast<CGFloat>(layoutConstraints.maximumSize.width);
 
-    RnTextLayout *layout = basalt::buildTextLayout(attributedString, paragraphAttributes);
+    // `adjustsFontSizeToFit`: how far the fonts have to shrink for this
+    // paragraph to fit the box Yoga offered. A no-op ratio of 1 for every
+    // paragraph that did not ask, which is almost all of them -- the search
+    // builds a layout per probe and must not run otherwise.
+    const basalt::FontFit fit = basalt::textFitScale(
+        attributedString,
+        paragraphAttributes,
+        static_cast<float>(maxWidth),
+        static_cast<float>(layoutConstraints.maximumSize.height));
+    RnTextLayout *layout = basalt::buildTextLayout(attributedString, paragraphAttributes, fit);
     const CGSize size = [layout sizeForWidth:maxWidth];
 
     // Core Text can report a line slightly wider than the width it was given,
@@ -114,14 +123,56 @@ TextMeasurement TextLayoutManager::measure(const AttributedStringBox &attributed
     // Reporting a zero frame for each keeps the count right, which is what
     // ParagraphShadowNode iterates over, but they are not positioned yet --
     // the same gap the GTK side has, for the same reason.
+    // Inline views (`<Text><View/></Text>`), one attachment per view and in
+    // fragment order, which is how ParagraphShadowNode pairs them back up. A run
+    // delegate reserved each box during layout, so these are where the paragraph
+    // put them rather than the zeroes this used to report. See backlog/text.md.
+    //
+    // The index arithmetic is the part to be careful about: fragment strings are
+    // UTF-8 and measured in bytes, while NSAttributedString counts UTF-16, so the
+    // offset is accumulated in UTF-16 units as each fragment is appended. Using
+    // byte offsets here would be right for ASCII and wrong the moment a paragraph
+    // contains an emoji before the view.
     TextMeasurement::Attachments attachments;
+    NSUInteger utf16At = 0;
     for (const auto &fragment : attributedString.getFragments()) {
-      if (fragment.isAttachment()) {
-        attachments.push_back(TextMeasurement::Attachment{
-            .frame = {.origin = {.x = 0, .y = 0}, .size = {.width = 0, .height = 0}},
-            .isClipped = false,
-        });
+      NSString *text = [NSString stringWithUTF8String:fragment.string.c_str()];
+      // The transformed text, because that is what was laid out: a
+      // `textTransform` that changes the length would otherwise put every
+      // attachment after it at the wrong index.
+      text = text != nil ? basalt::transformedFragmentText(fragment, text) : nil;
+      const NSUInteger start = utf16At;
+      utf16At += text == nil ? 0 : text.length;
+
+      if (!fragment.isAttachment()) {
+        continue;
       }
+
+      const auto &size = fragment.parentShadowView.layoutMetrics.frame.size;
+      if (size.width <= 0 || size.height <= 0) {
+        // Nothing measured it, so there is no box and no position to invent.
+        attachments.push_back(TextMeasurement::Attachment{.frame = {}, .isClipped = false});
+        continue;
+      }
+
+      const CGRect box = [layout frameForCharacterIndex:start width:maxWidth];
+      if (CGRectIsNull(box)) {
+        // Off the end of a truncated paragraph, which is what isClipped is for.
+        attachments.push_back(TextMeasurement::Attachment{.frame = {}, .isClipped = true});
+        continue;
+      }
+
+      attachments.push_back(TextMeasurement::Attachment{
+          .frame =
+              {
+                  .origin = {.x = static_cast<Float>(box.origin.x),
+                             .y = static_cast<Float>(box.origin.y)},
+                  // The size React Native measured, so a rounding difference in
+                  // the delegate cannot move the view off its own layout's box.
+                  .size = size,
+              },
+          .isClipped = false,
+      });
     }
 
     measured = TextMeasurement{.size = layoutConstraints.clamp(natural), .attachments = attachments};