Problem/Motivation

It can become quite awkward and unpleasant to use on really wide viewports, e.g. ultra wide monitors. You can simulate this on smaller screens by zooming out considerably with your browser's zoom. While the functionality seems to work fine, lines of text can become very long and difficult to read.

Proposed resolution

Limit the length of the text lines.

Remaining tasks

Find a solution that only applies to text and doesn't limit the width of the container.

CommentFileSizeAuthor
#20 3096358.20.patch2.23 KBsakthivel m
#17 3096358-17.patch2.23 KBVidushi Mehta
#12 selected_8282.png92.6 KBKondratievaS
#12 selected_8280.png125.98 KBKondratievaS
#11 interdiff_5-11.txt3.13 KBkostyashupenko
#11 3096358-Wide-viewports-causes-uncomfortable-text-line-length-11.patch2.22 KBkostyashupenko
#8 Mobile.png59.66 KBKondratievaS
#8 desktop.png418.68 KBKondratievaS
#5 3096358-5-Wide-viewports-causes-uncomfortable-text-line-length.patch1.84 KBsibustephen
#3 Screenshot 2020-01-09 at 10.48.14 PM.png257.83 KBsibustephen
#3 3096358-3-Wide-viewports-causes-uncomfortable-text-line-length.patch932 bytessibustephen

Issue fork drupal-3096358

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Ambient.Impact created an issue. See original summary.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 8.8.x-dev » 8.9.x-dev
Issue tags: +Usability
sibustephen’s picture

sibustephen commented
Status: Active » Needs review
StatusFileSize
new 3096358-3-Wide-viewports-causes-uncomfortable-text-line-length.patch932 bytes
new Screenshot 2020-01-09 at 10.48.14 PM.png257.83 KB

Hi lauriii, I have managed to add a readability approach for screen resolution bigger than 2560px (ultra wide resolutions) do take a look at the approach, attached a screenshot for the same.

ambient.impact’s picture

ambient.impact
they/them
Primary language English
Location Toronto
commented

@sibustephen While clever, that approach assumes the best approach is to zoom the whole thing in, but what about users that don't want to zoom in everything but have it still be readable/usable? If you were sitting close to the monitor, it probably wouldn't help much if everything was bigger, as you'd still need to scan to the left or right farther than is comfortable.

My workaround (Sass) has been this:

// This gives layout containers a maximum width and centres them horizontally.
.layout-container {
  $gutter-small:  1.5em;
  $gutter-large:  3em;

  max-width:      80em;

  padding-left:   $gutter-small;
  padding-right:  $gutter-small;

  @include media('>=38em') {
    padding-left:   $gutter-large;
    padding-right:  $gutter-large;
  }

  // The Claro CSS has multiple breakpoints where it applies horizontal margins,
  // so rather than try to replicate all instances and potentially break if/when
  // they update the CSS, just use !important.
  margin-left:    auto !important;
  margin-right:   auto !important;
}

The @include media is the include media Sass library, but that can be adapted to vanilla CSS.

sibustephen’s picture

sibustephen commented
StatusFileSize
new 3096358-5-Wide-viewports-causes-uncomfortable-text-line-length.patch1.84 KB

@ambient you are right, the solution provided here is that it makes more visible, the patch applied above is setting zoom level to 2, which is only applied for ultra width ports. Have added another patch according to your suggestion here, which works fine as well, do review -

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Parent issue: » #3076820: [META] Layout redesign
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Related issues: +#3092296: Improve email address field description at /user/register
KondratievaS’s picture

KondratievaS commented
StatusFileSize
new desktop.png418.68 KB
new Mobile.png59.66 KB

Tested patch from #5 and now we have too much empty space for desktop resolutions (on screenshot width = 1920px). Also, for mobile content is not centered

KondratievaS’s picture

KondratievaS commented
Status: Needs review » Needs work
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: Unassigned » kostyashupenko
kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Assigned: kostyashupenko » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3096358-Wide-viewports-causes-uncomfortable-text-line-length-11.patch2.22 KB
new interdiff_5-11.txt3.13 KB
KondratievaS’s picture

KondratievaS commented
StatusFileSize
new selected_8280.png125.98 KB
new selected_8282.png92.6 KB

Tested patch from #11 and currently we have same width for all desktop resolutions, I hope it is expected result.
Issue for mobile is fixed as well

Width

KondratievaS’s picture

KondratievaS commented
Status: Needs review » Reviewed & tested by the community

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

xjm’s picture

xjm
she/her
Primary language English
commented
Issue tags: +Needs frontend framework manager review, +Needs subsystem maintainer review
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Reviewed & tested by the community » Needs work

Thanks all for you work on this trying to solve a real problem Claro has! But I'm afraid the solution proposed so far is taking a lot of design assumptions that would need a proper design planning behind it. For example, this is defining a max-widthof 80em, without defining an horizontal grid and without using the already defined variables for spacing. I don't mean a solution like this one doesn't need to happen, but it needs a proper planning taking into account all the possible layouts & components (maybe we need some wider pages).

Meanwhile, and since this issue is trying to solve specifically the paragraph length, I would suggest to use the character count. Taking into account the current line-height and font-size, I would say max-width: 80ch would be the ideal line-length.

Vidushi Mehta’s picture

Vidushi Mehta commented
Status: Needs work » Needs review
StatusFileSize
new 3096358-17.patch2.23 KB

Added a patch for the same.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

sakthivel m’s picture

sakthivel m commented
StatusFileSize
new 3096358.20.patch2.23 KB

#20 Re-roll the patch

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
Status: Needs review » Needs work
Issue tags: -Needs frontend framework manager review, -Needs subsystem maintainer review

For what we're seeing in related issues like #3092296: Improve email address field description at /user/register or #3184667: Node form layout looks awkward on wide screens since #3158854 we can't limit the width of the whole page like this patch is doing: changes should be applied individually to each element.

I just updated the issue summary to make the needed changer more clear. So please, let's rethink the solution without max-widths instead of re-rolling a patch that already has been said won't fix this.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Gauravvvv made their first commit to this issue’s fork.

Gauravvvv opened merge request !7754

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work

The Needs Review Queue Bot tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Based on #22

So please, let's rethink the solution without max-widths instead of re-rolling a patch that already has been said won't fix this.

Sounds like max-width is not the desired solution.

smustgrave’s picture

smustgrave commented
Issue tags: +Bug Smash Initiative, +Needs issue summary update

Came up as a daily BSI target but still seems #31 applies.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.