Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Justified text is not possible in Firefox

See original GitHub issue

Do you want to request a feature or report a bug? Bug

What is the current behavior? Applying text-align: justify; on a block via a class name returned from the blockStyleFn function has no effect in Firefox.

It looks like this is because the white-space: pre-wrap; rule applied to .public-DraftStyleDefault-block, which is preventing the justified alignment in Firefox 50.1.0. The same problem does not exist in Chrome 55.0.2883.87.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/. Apply text-align: justify; to a block type class name. See example https://jsfiddle.net/rxycutze/2/

What is the expected behavior? It should be possible to apply the text-align: justify; CSS rule to a block without side effects.

Perhaps Draft.js should investigate the substitution of white-space with   and <br/> to avoid the need to apply white-space: pre-wrap;.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js? Draft.JS 0.9.1 Firefox 50.1.0

Issue Analytics

State:
Created 7 years ago
Comments:13

Top GitHub Comments

2reactions

si13bcommented, Feb 21, 2017

Thanks @Okazari , that workaround seems to work, although I don’t understand why as it seems to be still preserving the white-space (white-space: pre-wrap), despite using white-space: normal;. It could even be a bug in Firefox.

0reactions

RdNetworkcommented, Jan 21, 2022

@PeterDekkers

We found that adding white-space: normal caused other issues, so please be aware of this.

E.g. cursor jumping unexpectedly while editing in Firefox:

Delete any text

Type a few characters, hit space

The cursor will jump to the beginning of the line

There were also some uncaught errors in mobile Safari while making edits.

For now we’re opting to not allow justify-aligned text in Firefox.

I am currently facing the same issue, having to choose between ‘allowing justified text’ and ‘allowing typing a space at the end of a paragraph (otherwise the cursor jumps at the beginning of the paragraph)’… I haven’t found any way to achieve both yet. Did anyone find a solution for this?

Top Results From Across the Web

text-align: justify; doesn't work together with white-space

If an element's white space is not collapsible, then the UA is not required to adjust its text for the purpose of justification...

1497056 - Justify text in reader view - Bugzilla@Mozilla

Fully Justified type is generally harder to read and is done to help solidify the verticle separations between columns in multi-column layouts. Since...

text-justify - CSS: Cascading Style Sheets - MDN Web Docs

The text justification is turned off. This has the same effect as not setting text-align at all, although it is useful if you...

Address Bar is Justified Right | Firefox Support Forum

You can toggle the bidi text direction via "Command + Shift + X" on Mac (Windows: Ctrl + Shift + X), so you...

Reader mode ignores text-align and hyphens properties

Expected results: Given that the mobile version has hyphenation capabilities, this CSS property should not be ignored in reader mode. Additionally, justified ......