Skip to content

[web] Text with TextAlign.justify not work on iPhone #52019

Description

@andrea689

When I use:

Text(
  'my long text',
  textAlign: TextAlign.justify,
),

In the Mac Chrome and Safari working fine and also in Android Chrome, but not in the Safari and in Chrome for iOS.

I have investigated and I found that the problem is caused by white-space: pre-wrap; that not work with text-align: justify;.

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    platform-webWeb applications specifically
    on Mar 5, 2020
  2. ferhatb commented on Mar 5, 2020

    @ferhatb
    Contributor
  3. added this to the milestone on Mar 5, 2020
  4. added
    P1High-priority issues at the top of the work list
    on May 29, 2020
  5. added
    P2Important issues not at the top of the work list
    and removed
    P1High-priority issues at the top of the work list
    on Jun 16, 2020
  6. modified the milestone: on Jul 7, 2020
  7. removed this from the milestone on Jul 22, 2020
  8. removed this from the milestone on Aug 17, 2020
  9. pedromassangocode commented on Sep 22, 2020

    @pedromassangocode

    Hi @andrea689
    Are you still having this issue? If yes, can you please provide your flutter doctor -v, your flutter run --verbose and the expected vs actual results?
    Thank you

  10. added
    in triagePresently being triaged by the triage team
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Sep 22, 2020
  11. removed
    waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter responds
    on Oct 14, 2020
  12. TahaTesser commented on Oct 14, 2020

    @TahaTesser
    Contributor

    Without additional information, we are unfortunately not sure how to resolve this issue.
    We are therefore reluctantly going to close this bug for now.
    Please don't hesitate to comment on the bug if you have any more information for us; we will reopen it right away!
    Thanks for your contribution.

  13. rithviknishad commented on Jul 12, 2021

    @rithviknishad

    Having the same issue.

    flutter doctor -v

    [✓] Flutter (Channel stable, 2.2.1, on Linux, locale en_IN)
        • Flutter version 2.2.1 at /home/coffeelake/development/flutter
        • Framework revision 02c026b03c (7 weeks ago), 2021-05-27 12:24:44 -0700
        • Engine revision 0fdb562ac8
        • Dart version 2.13.1
    
    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
        • Android SDK at /home/coffeelake/Android/Sdk
        • Platform android-30, build-tools 30.0.3
        • Java binary at: /usr/local/android-studio/jre/bin/java
        • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)
        • All Android licenses accepted.
    
    [✓] Chrome - develop for the web
        • Chrome at google-chrome
    
    [✓] Linux toolchain - develop for Linux desktop
        • clang version 10.0.0-4ubuntu1
        • cmake version 3.16.3
        • ninja version 1.10.0
        • pkg-config version 0.29.1
    
    [✓] Android Studio (version 4.2)
        • Android Studio at /usr/local/android-studio
        • Flutter plugin version 56.0.2
        • Dart plugin version 202.8488
        • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)
    
    [✓] VS Code (version 1.57.1)
        • VS Code at /usr/share/code
        • Flutter extension version 3.24.0
    
    [✓] Connected device (2 available)
        • Linux (desktop) • linux  • linux-x64      • Linux
        • Chrome (web)    • chrome • web-javascript • Google Chrome 91.0.4472.114
    
    • No issues found!
    

    Steps to reproduce:

    Text(
        _paragraph,
        textAlign: TextAlign.justify,
    ),

    My Observations:

    • flutter build web (default web rednerer)
      Works fine on the desktop browser
      TextAlign.justify not effective on mobile browsers.

    • flutter build web --web-renderer canvaskit
      Works fine on both mobile and desktop.

    • flutter build web --web-renderer html
      TextAlign.justify not effective on both desktop and mobile browsers.

    • flutter run -d chrome
      TextAlign.justify not effective.

    Additionally, does work on Linux desktop. So I suppose it's a web-only thing.

  14. TahaTesser commented on Jul 13, 2021

    @TahaTesser
    Contributor

    Could everyone who still has this problem please file a new issue with the exact description of what happens, logs, and the output of flutter doctor -v.
    All system setups can be slightly different, so it's always better to open new issues and reference related issues.

  15. github-actions commented on Jul 30, 2021

    @github-actions

    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.

  16. locked as resolved and limited conversation to collaborators on Jul 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: typographyText rendering, possibly libtxtframeworkflutter/packages/flutter repository. See also f: labels.in triagePresently being triaged by the triage teamplatform-webWeb applications specifically

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions