Text orientation: Rotate vertical text when the text is aligned (Upside down text) #53175
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carolinan
added
[Type] Enhancement
|
Size Change: +585 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 4da369f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6033845829
|
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
carolinan
commented
Aug 1, 2023
carolinan
commented
Aug 1, 2023
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
ramonjd
added
Needs Design Feedback
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
carolinan
commented
Sep 1, 2023
| @@ -30,7 +30,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) { | |||
| } | |||
| $styles = ''; | |||
| if ( isset( $attributes['style']['typography']['writingMode'] ) ) { | |||
| $styles = "writing-mode:{$attributes['style']['typography']['writingMode']};"; | |||
| $styles = "writing-mode: {$attributes['style']['typography']['writingMode']};"; | |||
There was a problem hiding this comment.
I added an extra space here to match the inline style in the block editor.
carolinan
changed the title
jasmussen
reviewed
Sep 1, 2023
There was a problem hiding this comment.
Thank you for the work 🙏
Here's the Before GIF, showing the text alignment doing nothing:
Here's the After GIF, showing the text alignment actually affecting the vertical text:
As is, this is a great improvement because it actually affords configuration for the reading of the vertical text. Here's the default:
And here's the rotation applied when using the right alignment:
Question: can we / should we remove the text centering dropdown option for vertical text, since it does nothing?
The other question is around using rotate: 180deg; — initially my instinct was that we should use transform: scale(-1, 1);, however I'm sure you tried that and realized that isn't very legible:
But just in terms of the technical pieces, I wonder if rotate: 180deg; is better than transform: scale(-1, -1);, which would accomplish the same? The use of degrees suggest freeform rotation but in fact this particular feature is only about the verticality.
|
I used the scale initially -and the feedback was that it was unintuitive. |
|
I do think it can be confusing that neither left or center does anything; only right alignment changes the text. |
Yep, but the left alignment is an explicit left alignment, kind of like adding the text orientation toggle and only setting "horizontal" text. I don't think it's blocking. |
jasmussen
approved these changes
Sep 1, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This attempts to turn text "upside down" when the typography setting "writing mode" is set to vertical and the text is aligned to the right (ltr) or left (rtl).
Partial for #50319
Why?
The feature adds more flexibility for users.
Previously, the text alignment did not change the text visually when the writing mode was set to vertical; nothing would change based on this setting.
This feature is also needed for a block pattern designed for Twenty Twenty-Four
How?
Adds CSS, which rotates the text if the vertical text and the text alignment are enabled.
Testing Instructions
The writing mode feature is disabled by default. To enable it, add the following to theme.json, under settings > typography:
"writingMode": true,Ensure that your website has enough posts so that the next/previous post blocks will show on the front of the website.
Please add a paragraph block and a next/previous post block in the block editor.
For each block, open the typography panel and enable Text Orientation. Select the vertical text option.
Duplicate the blocks and change the text alignment option in the toolbar to align right.
In these blocks, the text should turn so that the first word in the block is at the bottom.
Save the post and view the front. Confirm that all blocks display correctly.
Switch to an LTR language and repeat from step 3, using left-aligned text instead of right-aligned.
Screenshots or screencast
In this video I am comparing the default text alignment and the right aligned text:
compare-default-and-right-aligned.mp4
In this video I am using an RTL language. I have added a paragraph block, I enable the vertical text orientation option and align the paragraph to the left, center and right.
upside-down-rtl.mp4