From 2f1e16eb2490f33867eaebec4fb4ac0d8b6b05a2 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 15 Nov 2023 11:08:06 -0500 Subject: [PATCH] content: Follow web app in using Source Sans 3, size 14, height 17 Values obtained by looking at the "Computed" tab in the Chrome DevTools element inspector, on CZO at 8.0-dev-2850-gef1c1ce05f. Technically the web app has a computed `line-height` of 16.996px, but that seems like a rounding error. One reason for doing this now is to opt out of a default that would take effect with the upcoming migration to Material 3. The text would otherwise get a line height of 1.43 times the font size, and we want it to be denser than that. We briefly explored how to preserve the line height exactly, across the M3 migration, but the solutions we found seemed more awkward than just taking care of this now: https://github.com/zulip/zulip-flutter/pull/380#issuecomment-1811819500 Fixes-partly: #157 Fixes-partly: #294 --- lib/widgets/content.dart | 9 ++++++++- test/widgets/content_test.dart | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart index 0da97d6aeb..3bdf524404 100644 --- a/lib/widgets/content.dart +++ b/lib/widgets/content.dart @@ -104,7 +104,14 @@ class Paragraph extends StatelessWidget { // The paragraph has vertical CSS margins, but those have no effect. if (node.nodes.isEmpty) return const SizedBox(); - final text = _buildBlockInlineContainer(node: node, style: null); + final text = _buildBlockInlineContainer( + node: node, + style: const TextStyle( + fontFamily: 'Source Sans 3', + fontSize: 14, + height: (17 / 14), + ).merge(weightVariableTextStyle(context)), + ); // If the paragraph didn't actually have a `p` element in the HTML, // then apply no margins. (For example, these are seen in list items.) diff --git a/test/widgets/content_test.dart b/test/widgets/content_test.dart index dac9bf0616..f97f348fa6 100644 --- a/test/widgets/content_test.dart +++ b/test/widgets/content_test.dart @@ -65,7 +65,7 @@ void main() { group('LinkNode interactions', () { // The Flutter test font uses square glyphs, so width equals height: // https://github.com/flutter/flutter/wiki/Flutter-Test-Fonts - const fontSize = 48.0; + const fontSize = 14.0; Future prepareContent(WidgetTester tester, String html) async { await testBinding.globalStore.add(eg.selfAccount, eg.initialSnapshot());