w3c / w3c/editing

Inconsistent Behavior of Softwrap Property in Textarea Across Browsers

Open
#482 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
202
Forks
43
PR merge metrics
No merged PRs in 30d

Description

Expected Behaviour:
When the cursor is placed at the beginning of a line in a textarea with the softwrap property and the space key is pressed, the cursor should remain on the same line, and spaces should be added to the current line.

Actual Behaviour:

  • In Chromium-based browsers, pressing the space key at the beginning of a line moves the text to the next line along with the cursor. Subsequent spaces keep adding new lines.

Image

  • In WebKit-based browsers, pressing the space key at the beginning of a line keeps the cursor at the beginning and adds spaces to the previous line.

Image

  • In Firefox, pressing the space key at the beginning of a line keeps the cursor on the same line, and spaces are added to the current line.

Image

Impact:

  • The inconsistent behaviour across browsers affects the user experience and can lead to confusion and incorrect text formatting in web applications that rely on the softwrap property in textareas.

Steps to Reproduce:

  1. Create a textarea with the softwrap property and add text that wraps to at least three lines.
  2. Place the cursor at the beginning of a line.
  3. Press the space key and observe the behaviour in different browsers (Chromium-based, WebKit-based, and Firefox).

Here is a quick link to repro: https://codepen.io/pranavmodi/pen/raNPRXG

Proposed Specification Change:

  • The specification should follow the behaviour observed in Firefox, where pressing the space key at the beginning of a line keeps the cursor on the same line and adds spaces to the current line. Visually, when a user presses the space key, the space should be visible to the user as they are entering it. In the current behaviour of Chromium-based and WebKit-based browsers, this is not the case, leading to a confusing user experience. The proposed change ensures that the space is visibly added to the current line, providing a more intuitive and logical experience for the user.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodePen reproduction and compare the textarea softwrap behavior in Chromium, WebKit, and Firefox. Read the relevant textarea and softwrap specification text, then determine whether the Firefox behavior can be specified consistently across engines. Done means an agreed specification change that clearly defines cursor placement and visible spaces at wrapped line starts.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.