Repository navigation
[WEB]Japanese punctuation and reading marks are misplaced. #165299
Description
Steps to reproduce
- Set up Flutter 3.29.
- Set a long sentence in the text widget.
- Display in Chrome.
Expected results
、 and 。 are just above the baseline as shown below.
The screenshots below show the results with Flutter 3.27.
Actual results
、 and 。 are centered as follows
Code sample
Code sample
https://dartpad.dev/?id=3382819292297fa111b8b16cec047abd
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Text(
'街の外れに位置する古びた図書館は、時代の流れから取り残されたように静かに佇んでいた。そこには古い本の匂いが漂い、訪れる人はまばらだった。だが、その図書館には誰も知らない秘密があった。\n'
'\n'
'毎晩、図書館が閉館すると、棚の奥にある古書がかすかに震え、表紙がゆっくりと開き始める。ページの間から淡い光が漏れ出し、その光に照らされて、小さな妖精たちが現れるのだった。彼らは本の中に宿る物語の守護者であり、物語が忘れられぬように毎晩語り合っていた。\n'
'\n'
'ある日、少年が偶然この秘密を見てしまった。彼は驚きのあまり声を失ったが、妖精たちは彼に優しく微笑みかけ、「君には僕らが見えるんだね」と話しかけた。その日から少年は毎晩図書館に通い、妖精たちから多くの物語を教わった。やがて少年は成長し、作家となり、図書館で聞いた物語を世界中に届けるようになった。',
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.2, on macOS 15.3 24D60 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.3)
[✓] VS Code (version 1.98.2)
[✓] Connected device (3 available)
[✓] Network resources
• No issues found!
Activity
maheshj01 commentedon Mar 18, 2025
Reproducible on stable and the master channel on the web (chrome and safari) with both renderers skwasm and canvaskit
macOS (Expected)
Web (Actual)
flutter doctor -v
[-][WEB][CanvasKit]Japanese punctuation and reading marks are misplaced.[/-][+][WEB]Japanese punctuation and reading marks are misplaced.[/+]yjbanov commentedon Mar 18, 2025
I see the bug in dartpad.
(@maheshj01, FYI, your repro seems to use the same macOS screenshot both for macOS and web)
5 remaining items
flutter-triage-bot commentedon Mar 18, 2025
Issue is assigned to multiple teams (engine, web). Please ensure the issue has only one
team-*label at a time. Usefyi-*labels to have another team look at the issue without reassigning it.maheshj01 commentedon Mar 18, 2025
Updated.
macoshita commentedon Mar 19, 2025
When specifying Noto Sans JP in Google Fonts, this issue does not occur.
Since Noto Sans JP has a very large file size, as a workaround, I incorporated a subset of Noto Sans JP that includes only
、and。into the project and applied the font, but even in that case, the issue did not occur.I hope this information is helpful.
koji-1009 commentedon Mar 29, 2025
Text display corruption occurs when the string "表紙がゆっくりと開き始める。ページの間から淡い光が漏れ出" is reproduced.
This issue is not limited to this specific text area and also affects other UI elements. For example, if the problematic text is added to the body and an AppBar contains a title (e.g., "テスト。"), the AppBar's title also exhibits the same display corruption.
[Engine][Web] Fixed fallback font loading process (#166212)
Squashed commit of the following:
github-actions commentedon Jun 19, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.[Engine][Web] Fixed fallback font loading process (#166212)