#40956 closed defect (bug) (fixed)
Twenty Twelve: Line-Height in TinyMCE Editor
Reported by: | superpoincare | Owned by: | azaozz |
---|---|---|---|
Milestone: | 4.9 | Priority: | normal |
Severity: | normal | Version: | 4.8 |
Component: | Bundled Theme | Keywords: | has-patch has-screenshots |
Focuses: | administration | Cc: |
Attachments (3)
Change History (23)
#2
in reply to:
↑ 1
@
7 years ago
Replying to spocke:
You can override this default style by setting .mceContentBody { line-height: xx; } to the content css used within the editor.
Sure, personally I have a custom editor-style.css in my child theme. But I raised this ticket so that this is done for everyone using the theme twenty twelve (or other themes where this is affected).
Or else should we change this ticket so that it's for bundled themes?
#3
@
7 years ago
- Component changed from TinyMCE to Bundled Theme
- Summary changed from Line-Height in TinyMCE Editor in Twenty Twelve to Twenty Twelve: Line-Height in TinyMCE Editor
#5
@
7 years ago
Caused by TinyMCE adding more specific line-height: 1.2;
for most block elements. To counter that we added line-height: inherit;
, but TwentyTwelve overrides line-height
to 1
on the body, then sets less specific line-height for the block elements.
As far as I see the best fast fix is to make the selectors for line-height in TwentyTwelve more specific. Ideally this should not be set in TinyMCE with higher specificity, i.e. the selectors should have been the tag names only without .mce-content-body
.
#6
follow-up:
↓ 7
@
7 years ago
We are changing the specificity of the css selector to "body" in iframe mode and ".mce-content-body" in inline mode. We are also setting the default line height to line-height: 1.3; that seems closest to what we have today and doesn't seem to break when font sizes increases. The default in WP seems to be 1.5 then overridden by skins so with this change everything should work out of the box except for inline gutenberg where the css would have to add a .mce-content-body { line-height: inherit; } or a specific override.
#7
in reply to:
↑ 6
@
7 years ago
Replying to spocke:
We are changing the specificity of the css selector to "body" in iframe mode and ".mce-content-body" in inline mode. We are also setting the default line height to line-height: 1.3;
Just to clarify, "we" as in developers of TinyMCE (and not Wordpress developers)?
This ticket was mentioned in Slack in #forums by jcastaneda. View the logs.
7 years ago
#9
@
7 years ago
Yes I meant we as tinymce developers so a patch to wp needs to needs done to get that new css override.
#10
follow-up:
↓ 11
@
7 years ago
Hi,
one question, I have changed the "line-height" parameter in "wp-content.css" and also in "editor-style.css", directly in browser it functions, when I changed these parameters in the files not function, why ?
I have to wait for plugin changes ?
Thanks
#11
in reply to:
↑ 10
@
7 years ago
Replying to blure:
I think it's because the files are being fetched from the cache not the server. Wordpress files have a query string appended to filenames which helps in breaking the cache. A new version will be fetched when the Wordpress version is changed or if cache expires.
But overwriting core Wordpress files is not good practice. This is because future updates will overwrite your changes.
Use a child theme and make a file named editor-style.css in the topmost folder and edit it and enqueue the file like this in child functions.php:
function twentytwelve_child_setup() { add_editor_style(); } add_action( 'after_setup_theme', 'twentytwelve_child_setup' );
#13
@
7 years ago
- Milestone changed from Awaiting Review to 4.9
Thinking it would be best if this is removed or set to only body
as a "global" line height, not to specific elements. This is a major readability setting and all themes that override it will still override, jumping text or not. That "jumping" seems to happen only in specific fonts anyway.
Alternatively we can delete it from the default editor css in WP.
#15
@
7 years ago
- Keywords has-patch added
I've looked at this on 4.8.1 and the TwentlyTwelve editor-style.css
was missing the line-height
to body
as @azaozz referenced. Since themes are using the line-height on body
tag at least for the editor's purposes 40956.diff simply adds that 1 missing line. The line-height is the same value as used on textareas
for TwentyTwelve.
#17
@
7 years ago
Hi @xkon,
In the diff, there's a repetition of line-height in the css.
You could instead change line 17 itself.
#18
@
7 years ago
Oh gosh, thanks @superpoincare 40956.2.diff fixes that. I didn't even see and it was in front of me. Time for a break I think :)
We changed the default line height in tinymce since the new inline boundary feature would otherwise make the the text jump up/down on windows due to font kerning of zwnbsp characters we use to place the caret. You can override this default style by setting .mceContentBody { line-height: xx; } to the content css used within the editor.