Add TextOverflow "ellipsisStart" , "ellipsisMiddle" and "ellipsisEnd"

[oodavid]

Use case

When displaying file-paths, I'd prefer to show the file-name and clip the file-path.

In this example, it's not possible to see the filenames:

Text(
  '/root/sdcard/storage/camera/2019-11-20 12:12:11 a-file-with-a-long-path.png',
  overflow: TextOverflow.ellipsis,
)

Proposal

Allow TextOverflow to clip text on the leading edge rather than the trailing edge.

Internal bug - b/180975303

[feinstein]

As I said in #47543 I suggest TextOverflow.ellipsisStart, TextOverflow.ellipsisMiddleand TextOverflow.ellipsisEnd.

[feinstein]

Give it a 👍🏻 (as they prioritize based on thumbs up count) and hope someone will get to fix it.

[trqalothman]

Here is the link for the Truncation property of Label, it is called line break and you can set it as "Truncate Head", "Truncate Middle", and "Truncate Tail". In flutter it only implements "Truncate Tail" and not the others.

https://developer.apple.com/documentation/swiftui/text/truncationmode/middle

[zmtzawqlp]

https://pub.dev/packages/extended_text support this feature now. you can define it as following:

enum TextOverflowPosition {
  start,
  middle,
  end,
}

  ExtendedText(
   overflowWidget: TextOverflowWidget(
     position: TextOverflowPosition.end,
     align: TextOverflowAlign.center,
     // just for debug
     debugOverflowRectColor: Colors.red.withOpacity(0.1),
     child: Container(
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           const Text('\u2026 '),
           InkWell(
             child: const Text(
               'more',
             ),
             onTap: () {
               launch(
                   'https://github.com/fluttercandies/extended_text');
             },
           )
         ],
       ),
     ),
   ),
  )

[iapicca]

https://pub.dev/packages/extended_text support this function now. you can define it as following:

@zmtzawqlp
nice to have a 3rd party package!
but I feel that this feature should be first party with "first party grade" testing and such

[JordanRoberts1]

https://pub.dev/packages/extended_text support this feature now. you can define it as following:

Extended Text doesn't support Flutter Master Channel so this isn't a successful work around for everyone:
fluttercandies/extended_text_field#80 (comment)

Would be nice if TextOverflow had "ellipsisStart", "ellipsisMiddle", and "ellipsisEnd" and would just be passed to Text.overflow

Text(
  'Hello World'
  overflow: TextOverflow.ellipsisStart
)

[jowenn]

I think this should be a standard feature, not needing 3rdparty packages.

[iapicca]

@TahaTesser I believe this feature could be very important for desktop as it deals with file paths much more than mobile

[trqalothman]

@nailgilaziev

Someone has to do a pull request on the flutter channel for this feature I guess!

[Vrajs16]

For Now this is the only solution available: https://stackoverflow.com/questions/71502532/flutter-text-overflow-at-beginning-of-sentence/71504034#71504034

[maximkuznetsovwork]

Hello guys! You can use Text.rich and WidgetSpan with Text inside it. Then wrap Text.rich and Text both with Transform.flip with flipX: true. It works and you don't need 3rd party libraries

[LongCatIsLooong]

The HTML renderer for the web platform is unlikely to be able to support this feature (there does not seem to be a CSS equivalent).

[LongCatIsLooong]

Determining the ellipsis style

SkParagraph currently does iterative shaping to determine the style of the text style of the ellipsis.

Interestingly it seems UIKit, even with the .byTruncatingMiddle option, has a similar behavior:

UIKit code demonstrating that the first ellipsized (logical?) character determines the style

    let colors : [UIColor] = [.red, .green, .blue, .yellow, .orange]
    let bgColors : [UIColor] = [.white, .lightGray]
    for i in 0 ..< growingText.length {
      let font = UIFont.systemFont(
        ofSize: 20.0 + CGFloat(i),
        weight: .regular,
        width: i % 2 == 0 ? .compressed : .expanded)
      growingText.addAttribute(.font, value: font, range: NSRange(location: i, length: 1))
      growingText.addAttribute(.foregroundColor, value: colors[i % colors.count], range: NSRange(location: i, length: 1))
      growingText.addAttribute(.backgroundColor, value: bgColors[i % bgColors.count], range: NSRange(location: i, length: 1))
    }

Ellipsized text with byTruncatingHead, byTruncatingMiddle and byTruncatingTail:

On the other hand Pango and Android do not do that.

This would mean that the UILabel ellipsis may need to be shaped iteratively. Since UIKit doesn't seem to support custom ellipsis strings (but coretext does), I guess shaping a standalone character is usually much less expensive (or they could just ask the font engine for the x advance of U+2026, since the fonts need to be resolved even for elided characters).

Upon further inspection, TextKit2 (which uses a private coretext function `CTLineCreateTruncatedLineWithTokenHandler`) seems to make some strange ellipsizing choices in some test cases.

Full Text	max width = 220	max width = 200
Each block is a character. large block font size = 100, small block font size = 20. Total width = 300	From top to bottom: .byTruncatingHead,.byTruncatingMiddle,.byTruncatingTail: The 3rd line could have included 2 more characters?	The 3rd line could have included 3 more characters?
max width = 180	max width = 160	max width = 140
max width = 120	max width = 100	max width = 80

Ellipsizing Across Bidi Boundaries

    let A = "A"
    let alef = "ا"
    let bidiText = ""
      + String(repeating: A, count: 1)
      + String(repeating: alef, count: 5)
      + String(repeating: A, count: 6)
    let colors : [UIColor] = [.red, .green, .blue, .yellow, .orange]
    for i in 0 ..< bidiText.length {
      bidiText.addAttribute(.foregroundColor, value: colors[i % colors.count], range: NSRange(location: i, length: 1))
    }

This is the render results of the string show above, in a special font where "A" looks like ▶ (for LTR) and "ا" looks like ◀ (for RTL).
Each glyph is 20 px wide, and each character (in logical order) is assigned a color.

Here's the result if the max width is set to 200 and lineBreakMode set to .byTruncatingMiddle

So

• the 5, 6, 7th (start index = 1, in logical order) characters are elided (the 5th, 6th are RTL and the 7th is LTR),
• the ellipsis seems to be considered RTL. This is surprising, U+2026 is a neutral character and the paragraph level should be LTR.

[flutter-triage-bot]

This issue is assigned to @LongCatIsLooong but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[haykgalstyan]

I'm shocked this is not supported already and not being addressed.