Cursor too high/short for non-alphabetic scripts such as Chinese, emojis, and others.

The cursor for text fields is the wrong size/height for the text when typing non-alphabetic/english-like scripts.

This has been confirmed to affect Chinese (and other chinese-like scripts), emojis, Arabic (and arabic-like scripts), but probably impacts more.

Example with Chinese:

It is interesting to note that highlighting the text works properly and covers the full vertical extent of the text. The cursor positions seems to be calculated from the same properties, but is coming up with a different result.

GetBoxesForRange() also seems to be outputting expected values.

in text_painter.dart get preferredLineHeight, we are laying out a ' ' (space) and using the line height. There is probably a better, more consistent way of doing this...

I was able to improve the behavior by changing the space character to a ▓ character, which takes up more vertical space.

Spaces in some languages and fonts are significantly shorter than the character itself. One solution is to use the current method before layout, and switch to true values after.

A problem with this is that may be varied heights within one paragraph (example, english and chinese) which require different cursor heights.

It seems that more than just the cursor depends on the preferredLineHeight value, which does not always reflect the actual line height, which can cause other issues as well. This may be the root cause of the text clipping bugs reported at #20183 since relating the preferredLineHeights to the character index causes the entire box to expand/shrink depending on the height of the character selected.

I suspect our current text painter's preferredLineHeight doesn't take into account the actual height TextStyle property of the TextSpan either.

We should use your new get box for range API for the cursor too.

In the 0.11.4 version, the height of the cursor seems to be acceptable, but the position is still not aligned.

Many lines of text also have problems, which may be caused by the same reasons. Part of the last line will be covered.

code is

  TextField(
     maxLines: 2,
  ),

And as maxlines becomes larger, the problem will be more obvious.

And there will be no such problem in English.

flutter --version

Flutter 0.11.4 • channel dev • https://github.com/flutter/flutter.git
Framework • revision df57dc9da9 (2 days ago) • 2018-11-11 22:36:47 -0800
Engine • revision 5646e86a6f
Tools • Dart 2.1.0 (build 2.1.0-dev.9.3 9c07fb64c4)

Dup of #23934

TextField ( style: TextStyle(height: 1.2) )

height ：1.2 solve the problem

I will close this now, as we have landed fixes that

Centers the caret
Makes it taller/take the full height of the line

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Cursor too high/short for non-alphabetic scripts such as Chinese, emojis, and others. #24182

flutter --version

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Cursor too high/short for non-alphabetic scripts such as Chinese, emojis, and others. #24182

Description

Activity

GaryQian commented on Nov 10, 2018

GaryQian commented on Nov 12, 2018

xster commented on Nov 12, 2018

CaiJingLong commented on Nov 14, 2018

flutter --version

zoechi commented on Nov 14, 2018

longwayto commented on Apr 2, 2019

GaryQian commented on Jul 18, 2019

github-actions commented on Aug 29, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions