Repository: flutter
Issue: With `TextBaseline.ideographic` text gets cut off below the baseline. 
Labels: framework,engine,a: internationalization,a: typography,has reproducible steps,P2,found in release: 2.8,found in release: 2.9,team-engine,triaged-engine

# What is the difference between TextBaseline.alphabetic and TextBaseline.ideographic?


## Overview
Just by reading [the TextBaseline documentation](https://api.flutter.dev/flutter/dart-ui/TextBaseline-class.html), I could not understand the difference in appearance between TextBaseline.alphabetic and TextBaseline.ideographic. So, to check out the visual difference, I try the sample code below. Although the baseline of the characters aligned, there was no visual difference. What is the difference TextBaseline.alphabetic and TextBaseline.ideographic?

## Reference

[The same question in the Stack Over Flow](https://stackoverflow.com/questions/56910191/what-is-the-difference-between-alphabetic-and-ideographic-in-flutters-textbasel) was answered about the difference between the two properties. But the sample code did not show the difference.


<details>
<summary> flutter doctor -v </summary>

```
$ flutter doctor -v
[✓] Flutter (Channel stable, 2.5.1, on macOS 11.5.2 20G95 darwin-x64, locale ja)
    • Flutter version 2.5.1 at /Users/sshayashi/fvm/versions/2.5.1
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffb2ecea52 (2 months ago), 2021-09-17 15:26:33 -0400
    • Engine revision b3af521a05
    • Dart version 2.14.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/sshayashi/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode13beta5.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 51.0.1
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.60.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.27.0

[✓] Connected device (2 available)
    • iPod touch (7th generation) (mobile) • C830390E-B470-4EC4-9F15-23477CACF678 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-2 (simulator)
    • Chrome (web)                         • chrome                               • web-javascript • Google Chrome 96.0.4664.55

• No issues found!
sshayashi@MacBook-Pro:~/Programs/baseline_reprodution »
```

</details>

<details>
<summary> sample code </summary>

```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline
                  .ideographic, // TextBaseline.alphabetic show the same result
              children: const [
                Text(
                  'ABCDefgh 漢字漢字漢字',
                ),
                Text(
                  'ABCDefg 漢字',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

```

</details>


<details>
<summary> sample code screenshots </summary>

|  no baseline properties   |   TextBaseline.alphabetic | TextBaseline.ideographic |
|---|---|---|
| <img src="https://user-images.githubusercontent.com/12263798/144730808-52db1744-eef8-40df-a389-2e2916f11efd.png " width="320">  | <img src="https://user-images.githubusercontent.com/12263798/144730826-6e30a304-322e-435c-99f2-edf14c4d2cca.png" width="320">  | <img src="https://user-images.githubusercontent.com/12263798/144730826-6e30a304-322e-435c-99f2-edf14c4d2cca.png" width="320">  |

</details>