fluttercandies/extended_text

Overflow widget in right-to-left language

krzysztof-swi opened this issue · 5 comments

Hi,
When using language like arabic, text is read from right to left.
So the end of the text is in bottom left corner.
Currently overflow widget displays incorrectly - in bottom right corner, as visible on the screenshot.
obraz

Attached below is a code snippet for this example:

import 'package:extended_text/extended_text.dart';
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(
      home: OverflowTest(),
    );
  }
}

class OverflowTest extends StatelessWidget {
  const OverflowTest({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Directionality(
        textDirection: TextDirection.rtl,
        child: SizedBox(
          width: 200,
          child: ExtendedText.rich(
            const TextSpan(
                text: "كن لا بد أن أوضح لك أن كل هذه الأفكار"
                    " المغلوطة حول استنكار  النشوة وتمجيد"
                    " الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة"
                    " وأساس تلك السعادة البشرية، فلا أحد يرفض أو"
                    " يكره أو يتجنب الشعور بالسعادة، ولكن بفضل"
                    " هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا"
                    " بد أن نستشعرها بصورة أكثر عقلانية ومنطقية"
                    " فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه ل"
                    "ا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم"
                    " ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي"),
            overflowWidget: _getOverflowWidget(context),
            maxLines: 2,
          ),
        ),
      ),
    ));
  }

  TextOverflowWidget _getOverflowWidget(BuildContext context) {
    return const TextOverflowWidget(
      debugOverflowRectColor: Colors.green,
      child: Text(" أكثر "),
    );
  }
}

If I use overflow: TextOverflow.ellipsis, instead of overflowWidget it displays correctly - on the left end of the text.

not support right to left language due to TextPainter is not support

I'm not sure we understood each other.
The desired effect is shown on the screen:
obraz

I was able to obtain it with small changes in TextOverflowMixin
Please find below a pull request:
#139

i means TextPainter is not support RTL to get position. it's not just to put it to bottom left but it need to compute position to avoid cut off words or WidgetSpan.

I understand. Maybe it would be worth creating an issue to Flutter to handle this situation?