Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add justified text alignment option to text alignment toolbar #6833

Closed
ZebulanStanphill opened this issue May 18, 2018 · 28 comments
Closed

Add justified text alignment option to text alignment toolbar #6833

ZebulanStanphill opened this issue May 18, 2018 · 28 comments
Labels
[Type] Enhancement A suggestion for improvement.

Comments

@ZebulanStanphill
Copy link
Member

There is a text alignment option missing

The standard text alignment toolbar component in Gutenberg currently supports left, center, and right alignment. However, it currently does not have an option for justified text alignment (text-align: justify). I think this option should be added to the standard text alignment toolbar component.

@vtrpldn
Copy link

vtrpldn commented May 18, 2018

Justify and underline were dropped from the default editor since 4.7. I don't remember the exact reasons but I don't think it's coming back.

@danielbachhuber danielbachhuber added the [Type] Enhancement A suggestion for improvement. label May 18, 2018
@danielbachhuber
Copy link
Member

I've filed this away in the Ideas project for future consideration.

@danielbachhuber danielbachhuber changed the title Add justified text alignment option Add justified text alignment option to text alignment toolbar May 18, 2018
@ajitbohra
Copy link
Member

ajitbohra commented May 19, 2018

The underline and justify buttons are no longer available. According to Andrew Ozz, who primarily works on the TinyMCE editor in WordPress, underlining text causes confusion as readers may interpret it as a link. The justify button was removed because it has uneven browser implementation and often makes text less readable. However, keyboard shortcuts for both buttons will continue to work in 4.7.

https://wptavern.com/wordpress-4-7-removes-the-underline-and-justify-buttons-from-the-editor

@mlopezcoria
Copy link

Justify and underline were dropped from the default editor since 4.7. I don't remember the exact reasons but I don't think it's coming back.

But you could use the shortcut Shift + Alt + J to justify the selected text. With Gutenberg this shortcut does not work anymore!

@Mc61
Copy link

Mc61 commented Nov 29, 2018

Justify and underline were dropped from the default editor since 4.7. I don't remember the exact reasons but I don't think it's coming back.

But you could use the shortcut Shift + Alt + J to justify the selected text. With Gutenberg this shortcut does not work anymore!

return at least Shift + Alt + J

@Shivangi1985
Copy link

Shift+Alt+J doesn't work in Gutenberg editor. Please tell any other option to justify text alignment.

@mikeicode
Copy link

Shift+Alt+J doesn't work in Gutenberg editor. Please tell any other option to justify text alignment.

You can achieve this with CSS.

If you add the following CSS at Appearance → Customize → Additional CSS:

/* --- Justify Text Option --- */
.justify-text {
	text-align: justify;
}

Then in the editor when you have a block selected you can add the CSS class justify-text in the right bar under "Advanced", example: https://snag.gy/SKIoHe.jpg

@BrunoBoehm
Copy link

Hi there,
this is truly a weird choice, justified text is something that clients ask for a lot, and having to use a class for this seems quite overkill. Any update on this, or maybe a way to extend components to add it in?

@helen-oneill
Copy link

i too agree with BrunoBoehm. frustrating that justify text has been removed.

@helen-oneill
Copy link

Shift+Alt+J doesn't work in Gutenberg editor. Please tell any other option to justify text alignment.

You can achieve this with CSS.

If you add the following CSS at Appearance → Customize → Additional CSS:

/* --- Justify Text Option --- */
.justify-text {
	text-align: justify;
}

Then in the editor when you have a block selected you can add the CSS class justify-text in the right bar under "Advanced", example: https://snag.gy/SKIoHe.jpg

Worked perfectly, THANK YOU so much!

@okainov
Copy link

okainov commented Jul 27, 2019

Any updates on this one? Justify was really nice feature.

@Misiu
Copy link

Misiu commented Aug 21, 2019

@ajitbohra if there are so many people asking for this option why can't it be added back? If you don't need it, then you don't have to use it. At least give us an option.
Custom CSS is a workaround, but there should be an option (button) that does this, without any workarounds.

@ilDon
Copy link

ilDon commented Jan 7, 2020

Why is this closed?!

@mikeicode
Copy link

Why is this closed?!

The Paragraph block now has a justify option:

img
Full image: https://d.pr/i/eIecWQ

@ilDon
Copy link

ilDon commented Jan 7, 2020

@mikeicode thanks for the update, do you know since what version? I fear that I'm stuck with an older one...

@mikeicode
Copy link

thanks for the update, do you know since what version? I fear that I'm stuck with an older one...

I might have been slightly incorrect about that. After further testing I see that the latest Gutenberg and latest WP doesn't have this option. If you have Jetpack enabled on the site this option is available.

@toudal
Copy link

toudal commented Apr 3, 2020

This is the main reason why we do not use Gutenberg and the only reason I don't use it. Why would the only professional looking text alignment be insignificant and a dropped feature? Where are the business developers who actually listen to the end-users?

@strarsis
Copy link
Contributor

strarsis commented Apr 3, 2020

@toudal: The Gutenberg Page Building Toolkit – EditorsKit plugin extends the Gutenberg editor by a text-align justify format option. It also offers other features (which can be all turned on/off).

While I agree that some important features for Gutenberg are still missing (notably multiple block style selection), the extensible nature of WordPress and Gutenberg can often offset this (like in this case by using a plugin).

@ZebulanStanphill
Copy link
Member Author

Well, this is funny. I'm the person who created this ticket asking for this feature, but now my opinion has flipped, and I think justified text is a bad idea. 😆

@toudal It's worth noting that the justify option was removed from the classic editor due to accessibility concerns, since justified text is considered harder to read than standard left/right-aligned text, since:

  • Every line being the same width makes it more difficult to find your place in a long paragraph compared to standard left/right-aligned text.
  • You have to hyphenate text to make sure there isn't a silly amount of space between words in a line, and this is really difficult in the context of responsive websites without using CSS properties that have limited browser support.

So user feedback is actually why the option was removed in the first place.

It's also worth noting that justified text is something you probably would never use on one or two blocks alone. If you're using it, it's probably a general design choice that applies across your site. Because of that, it should probably be up to the theme (or else the upcoming Global Styles system) to set the default text alignment to justified.

Because of these factors, I don't think it makes sense to provide a (visible) option to set individual paragraph blocks to justified text alignment in core WordPress. Of course, a plugin can add the option if you really want it, but since it is considered bad practice, it shouldn't be promoted as a visible option by a default WP installation.

@ilDon
Copy link

ilDon commented Apr 3, 2020

@ZebulanStanphill your point makes 100% sense and I am too now convinced that it should not be there. As you correctly pointed out, I did indeed add the justified style via CSS, as it was a general setting that I wanted for each paragraph of each article.

However, I still think that something should be done about it. A proper explanation, perhaps in the tutorial, or simply an "official" blog post on WordPress, would probably be enough. Otherwise it might look as if the lack of a justified option is due to a bad design of Gutenberg, which is on the contrary pretty well designed.

This is especially true for non tech-savvy users, which are the most likely to have troubles getting used to the idea of plugins, not to mention editing CSS.

@toudal
Copy link

toudal commented Apr 3, 2020

@ZebulanStanphill I have never read a book that was not text style justified ... Pick Up any physical paper book, like you know, an oldschool papyrus thing, so what you talking about? I agree that it should be default as it is the way everyone with an eye for design would normally write...from an UI design point of view; Two of the other types of text alignment styles can be challenged as excess as they are never utilized.

@toudal
Copy link

toudal commented Apr 3, 2020

@ilDon Yes but I cannot see how to avoid having the button... If you have a button change the text style to one thing and change your mind, you would need the button to revert text to justified. Just plain simple; Text alignment justified should be part of the UI.

@toudal
Copy link

toudal commented Apr 3, 2020

To complement all of you guys! Gutenberg is quite perfect and a great thing happening in the WordPress community but it will never be considered a success by the general public before you add this exact lack of functionality. Text justified is the main reason why the old editor and other similar plugins are popular with so many downloads.

@ZebulanStanphill
Copy link
Member Author

@toudal I suppose instead of paraphrasing and potentially misrepresenting (which I probably did a bit in my prior post), I ought to just link to what an accessibility specification actually says:

https://www.w3.org/TR/WCAG20-TECHS/G169.html

On paper, hyphens are carefully set to ensure a mostly consistent spacing between words. But in the context of websites, the number of words per line often changes depending on the screen width, so manually inserted hyphens are rarely a good idea (and are annoying to have to insert anyway). (And CSS support for automatic hyphens appears to be less than ideal across browsers.)

As for the other text alignment options, center alignment is obviously very popular. It has its own accessibility issue: the starting position of a line changes every line, which can be annoying during reading. For short spans of text, though, it's usually fine, e.g. how this site uses it. The right alignment option is less useful, but I still see it used in some cases, mainly for visual flair. I used to use it on my website's home page, though I've since moved away from that since I figured that consistently using left alignment would be more quickly readable. It's also worth noting that right alignment is the default for sites using an RTL language.

As an aside: In the context of standard post editing, I guess you don't really need any of the text alignment options. They're really only useful for more complicated landing pages and such. I wonder if WordPress should provide an option to disable some styling options for certain user roles. Someone who writes blog posts on a website probably doesn't need the same amount of per-block styling controls as a designer building a fancy home page. But I suppose that's a topic for a separate issue.

On a related note, I think a justify-text option could/should be provided in the upcoming Global Styles interface alongside other text controls. Do you think that would more or less resolve the issue?

@ZebulanStanphill
Copy link
Member Author

@toudal

Text justified is the main reason why the old editor and other similar plugins are popular with so many downloads.

But... the justify option doesn't exist in the classic editor either. It was removed when WP 4.8 came out in 2017. Installing the Classic Editor plugin doesn't give you a justify text option.

Of course, popular plugins like TinyMCE Advanced can bring back the option in the classic editor, but the same can be said for the block editor. (Notably, although TinyMCE Advanced does support the block editor, it doesn't add a justify option to blocks. Other plugins like EditorsKit do add that option, though.)

@toudal
Copy link

toudal commented Apr 4, 2020

@ZebulanStanphill You are right. We have TinyMCE installed also and it does not work with Gutenberg hence we use the old editor.

@toudal
Copy link

toudal commented Apr 4, 2020

@ZebulanStanphill Automatic hyphens on a website, ok. Everybody search the internet and finds the solution. If end-users has the option in Gutenberg, they will never search for the solution online hence the number of people utilizing Gutenberg would be quantizilladroupled.

@gasova
Copy link

gasova commented Jul 23, 2020

I do not understand why this has been closed?

They are situations where justified text is necessary and perfectly readable? No-one should dictate what can or cannot be done justified text has to be enabled and implemented on gutenberg editor.

Please stop that sheet telling, justification not working, hyphens, etc., etc,. It is nonsence to not include this feature.

For you it can be useless for others it can be a must have.

In our case I'm developing a wp plugin where the user has to create a page or post with dynamic fields, (using the gutenberg editor).

So when the visitor fills a form, the custom post is called and converted into a pdf.

This document can be a contract having administrative purposes with non-breakable formats given by the government and may contain justified text as well.

Instead of forcing us to hack the editor, or google it, you should add it to the editor with the other alignment options.

#wewantjustifiedtextback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests