text: Add and use localizedTextBaseline

This seems like a handy function to have around; there were a
handful of places that were wanting something like this.

In b75908b, we aimed to make ContentTheme.textStylePlainParagraph
a very direct, NFC translation of some Typography defaults, but we
accidentally fell short a little bit: I had forgotten that we
support Japanese, and that commit just hardcoded
TextBaseline.alphabetic, which was a regression. Since the "geometry
TextThemes" for M3 only differ in `textBaseline` [1], I believe that
commit would have been a pure translation if we had used this new
function. (We did follow up with 6284ed5, removing the
textBaseline field altogether. But that put the style at odds with
text basically everywhere else, which inherits a textBaseline from
Typography.)

I was hoping to see an improvement in how Japanese text is rendered
after this change, but I wasn't able to; I didn't notice any change
in appearance between TextBaseline.alphabetic and
TextBaseline.ideographic (or a TextStyle that omits the field, in
the case of ContentTheme.textStylePlainParagraph.) Anyway, if this
is because of incomplete support for `ideographic`, at least we'll
be well-prepared to take improvements as they arrive.

Someone did post some screenshots with both values rendering
identically:
  flutter/flutter#94680

[1] The Material 2 spec apparently called for more differences that
    were removed in Material 3; see the docs for
    Typography.dense2021 and tall2021.

Author: chrisbobbe

lib/widgets/content.dart

@@ -39,6 +39,7 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
       color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
       fontSize: kBaseFontSize,
       letterSpacing: 0,
+      textBaseline: localizedTextBaseline(context),
       height: (22 / kBaseFontSize),
       leadingDistribution: TextLeadingDistribution.even,
       decoration: TextDecoration.none,
@@ -345,7 +346,7 @@ class ListItemWidget extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.start,
       crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: TextBaseline.alphabetic,
+      textBaseline: localizedTextBaseline(context),
       children: [
         SizedBox(
           width: 20, // TODO handle long numbers in <ol>, like https://github.com/zulip/zulip/pull/25063

lib/widgets/message_list.dart

@@ -120,7 +120,10 @@ class MessageListAppBarTitle extends StatelessWidget {
 
   final Narrow narrow;
 
-  Widget _buildStreamRow(ZulipStream? stream, String text) {
+  Widget _buildStreamRow(BuildContext context, {
+    ZulipStream? stream,
+    required String text,
+  }) {
     // A null [Icon.icon] makes a blank space.
     final icon = (stream != null) ? iconDataForStream(stream) : null;
     return Row(
@@ -129,7 +132,7 @@ class MessageListAppBarTitle extends StatelessWidget {
       //   For screenshots of some experiments, see:
       //     https://github.com/zulip/zulip-flutter/pull/219#discussion_r1281024746
       crossAxisAlignment: CrossAxisAlignment.baseline,
-      textBaseline: TextBaseline.alphabetic,
+      textBaseline: localizedTextBaseline(context),
       children: [
         Icon(size: 16, icon),
         const SizedBox(width: 8),
@@ -149,13 +152,13 @@ class MessageListAppBarTitle extends StatelessWidget {
         final store = PerAccountStoreWidget.of(context);
         final stream = store.streams[streamId];
         final streamName = stream?.name ?? '(unknown channel)';
-        return _buildStreamRow(stream, streamName);
+        return _buildStreamRow(context, stream: stream, text: streamName);
 
       case TopicNarrow(:var streamId, :var topic):
         final store = PerAccountStoreWidget.of(context);
         final stream = store.streams[streamId];
         final streamName = stream?.name ?? '(unknown channel)';
-        return _buildStreamRow(stream, "$streamName > $topic");
+        return _buildStreamRow(context, stream: stream, text: "$streamName > $topic");
 
       case DmNarrow(:var otherRecipientIds):
         final store = PerAccountStoreWidget.of(context);
@@ -899,7 +902,7 @@ class MessageWithPossibleSender extends StatelessWidget {
       senderRow = Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         crossAxisAlignment: CrossAxisAlignment.baseline,
-        textBaseline: TextBaseline.alphabetic,
+        textBaseline: localizedTextBaseline(context),
         children: [
           Flexible(
             child: GestureDetector(

lib/widgets/profile.dart

@@ -195,7 +195,7 @@ class _ProfileDataTable extends StatelessWidget {
 
       items.add(Row(
         crossAxisAlignment: CrossAxisAlignment.baseline,
-        textBaseline: TextBaseline.alphabetic,
+        textBaseline: localizedTextBaseline(context),
         children: [
           SizedBox(width: 100,
             child: Text(style: _TextStyles.customProfileFieldLabel(context),

lib/widgets/text.dart

@@ -373,3 +373,24 @@ double proportionalLetterSpacing(
   final effectiveTextScaler = textScaler ?? MediaQuery.textScalerOf(context);
   return effectiveTextScaler.scale(baseFontSize) * proportion;
 }
+
+/// The most suitable [TextBaseline] for the current language.
+///
+/// The result is chosen based on information from [MaterialLocalizations]
+/// about the language's script.
+/// If [MaterialLocalizations] doesn't have that information,
+/// gives [TextBaseline.alphabetic].
+// Adapted from [Theme.of], which localizes text styles according to the
+// locale's [ScriptCategory]. With M3 defaults, this just means varying
+// [TextStyle.textBaseline] the way we do here.
+TextBaseline localizedTextBaseline(BuildContext context) {
+  final materialLocalizations =
+    Localizations.of<MaterialLocalizations>(context, MaterialLocalizations);
+  final scriptCategory = materialLocalizations?.scriptCategory
+    ?? ScriptCategory.englishLike;
+  return switch (scriptCategory) {
+    ScriptCategory.dense => TextBaseline.ideographic,
+    ScriptCategory.englishLike => TextBaseline.alphabetic,
+    ScriptCategory.tall => TextBaseline.alphabetic,
+  };
+}

test/widgets/text_test.dart

@@ -2,9 +2,12 @@ import 'package:checks/checks.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/widgets/app.dart';
+import 'package:zulip/widgets/page.dart';
 import 'package:zulip/widgets/text.dart';
 
 import '../flutter_checks.dart';
+import '../model/binding.dart';
 
 // From trying the options on an iPhone 13 Pro running iOS 16.6.1:
 const kTextScaleFactors = <double>[
@@ -15,6 +18,8 @@ const kTextScaleFactors = <double>[
 ];
 
 void main() {
+  TestZulipBinding.ensureInitialized();
+
   group('zulipTypography', () {
     Future<Typography> getZulipTypography(WidgetTester tester, {
       required bool platformRequestsBold,
@@ -382,4 +387,34 @@ void main() {
         expected: clampingTextScaler.scale(14) * 0.01);
     }
   });
+
+  group('localizedTextBaseline', () {
+    Future<void> testLocalizedTextBaseline(Locale locale, TextBaseline expected) async {
+      testWidgets('gives $expected for $locale', (tester) async {
+        addTearDown(testBinding.reset);
+        tester.platformDispatcher.localeTestValue = locale;
+        tester.platformDispatcher.localesTestValue = [locale];
+        addTearDown(tester.platformDispatcher.clearLocaleTestValue);
+        addTearDown(tester.platformDispatcher.clearLocalesTestValue);
+
+        await tester.pumpWidget(const ZulipApp());
+        await tester.pump();
+
+        final navigator = await ZulipApp.navigator;
+        navigator.push(MaterialWidgetRoute(page: Builder(builder: (context) =>
+          Text('123', style: TextStyle(textBaseline: localizedTextBaseline(context))))));
+        await tester.pumpAndSettle();
+
+        final TextStyle? style = tester.widget<Text>(find.text('123')).style;
+        final actualTextBaseline = style!.textBaseline!;
+        check(actualTextBaseline).equals(expected);
+      });
+    }
+
+    testLocalizedTextBaseline(const Locale('en'), TextBaseline.alphabetic);
+    testLocalizedTextBaseline(const Locale('ja'), TextBaseline.ideographic);
+
+    // "und" is a special language code meaning undefined; see [Locale]
+    testLocalizedTextBaseline(const Locale('und'), TextBaseline.alphabetic);
+  });
 }