Support for Text Alignment

[jleandroperez]

Description:

We should add support for Text Alignment (<center> tags / CSS <p style="text-align:center;">).

Related Issues:

Support CSS Styles #285 is definitely a requirement. Android: https://github.com/wordpress-mobile/AztecEditor-Android/issues/465

Proposal:

1. Implement proper support for the alignment properties
2. Add new Format Bar buttons

[iamthomasbishop]

I think we've gotten enough evidence to tackle # 2 in your list (add new format toolbar buttons). I had this in part of my initial design that didn't make it into v1. It essentially worked the same way as the other popup options (headings/paragraph, lists, etc), as follows:

• One single button that initially shows left-align icon by default (with default styling)
• When user taps button, we show a popup that shows [left align] [center align] [right align] [justify]
• When user selects an option, the popup hides and we show the newly chosen icon (in active style) in the button space.

For reference, a design:

[diegoreymendez]

That looks very good @iamthomasbishop. I imagine this icon already exists in GridIcons?

[iamthomasbishop]

@diegoreymendez Yup! All of the icons are already in the set :)

[iamthomasbishop]

@diegoreymendez Do you need anything else for this in terms of design? As far as I can tell, the action items are:

• Add alignment button to toolbar list (after Strikethrough, before horizontal rule)
• Build popup/selection list for alignment options
• Wire up so selection works similarly to heading selection

Notes:

• Does this also work for aligning images? Ideally, it should.
• By default, align left is active but icon is default style. The icon in the toolbar only becomes active while user has the popup open or after they've chosen an item from the list
• When user first opens popup, Align Left is selected by default in list

[diegoreymendez]

@iamthomasbishop - When this issue is tackled, we may have additional questions, but for the time being I think we're good. Thanks for the help!

This issue may need to be broken down a bit, since alignment for images and text may not be atomic enough to implement together.

[ChrissiePollock]

This has been brought up again in #238541-h

[SiobhyB]

This was requested again in 265411-h

[sarahblackstock]

Requested in app support.

internal ref: #265691-h

[SiobhyB]

Another request in 1310974-z.

[SiobhyB]

A request for a justify button in 1341684-z.

[SiobhyB]

A request for centre alignment in 1364630-z.

[Lapinou42]

Hello guys, Any news about this support for Text Alignment ?

[jleandroperez]

Hello there @Lapinou42 ! I'm afraid Aztec is in maintenance mode, since development efforts have been diverted over to Gutenberg.

As per how to implement this, if you're up for it, I'd suggest you take a look at the *Formatters (FontFormatter, for instance).

All you'd really need to do is to set the .alignment property, contained within NSMutableParagraphStyle, and apply it to the proper range. A bit of reverse engineering over how Bold works should give you the full attack plan.

Thanks for your interest in Aztec!

[Lapinou42]

Hello @jleandroperez , thank you so much for your guidelines :) I'm gonna check that :)

[jleandroperez]

Best of luck @Lapinou42 !! If anything, please, feel free to poke us. We're in the WordPress Foundation Slack, #mobile channel.

[WestFlow127]

Hello @jleandroperez , thank you so much for your guidelines :) I'm gonna check that :)

@Lapinou42 Did you successfully implement the alignment in the way described above?

[WestFlow127]

Was this added in the last few months? @jleandroperez

[jleandroperez]

Hi there @WestFlow127, not that I'm aware of.

I'm afraid dev efforts have shifted towards Gutenberg, and this issue has become low priority.

[WestFlow127]

After updating the pod to version 1.19.1 I was able to get the alignment set! Apparently it has been added. Thanks anyway!

[jleandroperez]

Awesome!! Thanks for looking back @WestFlow127 !!

@SergioEstevao do you recall implementing Text Alignment support? I can't spot the associated PR (so that we can close this one!). Thank you sir!

[SergioEstevao]

@jleandroperez We didn't add support for text-alignment by setting the CSS style in the HTML elements.

But we did some fixes for just proper setting the TextView textalignment prop, maybe that is what @WestFlow127 is using?

[cliff357]

is this feature(text alignment) support in latest version?

[cliff357]

I just add this code in html mode

TEXT

but didn't work as expected. Can someone help? thanks /_\

[jleandroperez]

@cliff357 text alignment was never implemented, (specially via CSS), so that snippet isn't expected to work.

[WestFlow127]

Sergio is correct, I am using the TextAlignment property of the textview. This worked for basic 'Left, Right, and Center' alignment.

-Weston

On Mon, Jun 1, 2020 at 6:15 AM Jorge Leandro Perez [email protected] wrote:

@cliff357 https://github.com/cliff357 text alignment was never implemented, (specially via CSS), so that snippet isn't expected to work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wordpress-mobile/AztecEditor-iOS/issues/649#issuecomment-636854733, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADKTUZZU2LDTU2QN5H7MYADRUOSYNANCNFSM4DUKLBNQ .