jenkins-bot has submitted this change and it was merged.
Change subject: Break all headings across lines
......................................................................
Break all headings across lines
... as well as the links in the TOC.
* Simplify the rules in skins.minerva.content.styles/headings.less
* Apply word-wrap: break-word to all headings and additionally apply
word-break: break-word to fix Google Chrome
* Remove the hyphens mixin as it's no longer used
Bug: T93826
Change-Id: I0b7fc8b5d2a58fbb6b85a64257e204c979cc246a
---
M minerva.less/minerva.mixins.less
M resources/mobile.toc/toc.less
M resources/skins.minerva.content.styles/headings.less
3 files changed, 22 insertions(+), 28 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less
index 1c499b2..097913e 100644
--- a/minerva.less/minerva.mixins.less
+++ b/minerva.less/minerva.mixins.less
@@ -70,10 +70,3 @@
-webkit-animation: @args;
animation: @args;
}
-
-.hyphens( @args ) {
- -webkit-hyphens: @args;
- -moz-hyphens: @args;
- -ms-hyphens: @args;
- hyphens: @args;
-}
diff --git a/resources/mobile.toc/toc.less b/resources/mobile.toc/toc.less
index f8b2c39..209f0dc 100644
--- a/resources/mobile.toc/toc.less
+++ b/resources/mobile.toc/toc.less
@@ -63,6 +63,7 @@
// This ensures when a heading spills to a
second line it can be distinguished from other headings
a {
white-space: pre-wrap;
+ word-break: break-word;
}
line-height: 1.2;
}
diff --git a/resources/skins.minerva.content.styles/headings.less
b/resources/skins.minerva.content.styles/headings.less
index ca3c649..35d15e7 100644
--- a/resources/skins.minerva.content.styles/headings.less
+++ b/resources/skins.minerva.content.styles/headings.less
@@ -3,8 +3,10 @@
// All headings styled in the content div will be styled like so.
//
// Markup:
+// <div class="pre-content">
+// <h1 id="section_0">Heading 1</h1>
+// </div>
// <div class="content">
-// <h1>Heading 1</h2>
// <p>Paragraph of text</p>
// <h2>Heading 2</h2>
// <p>Paragraph of text</p>
@@ -25,28 +27,26 @@
@headingLineHeight: 1.3;
-// Page title
-// h1#section_0 is not inside .content...
-#section_0 {
- line-height: @headingLineHeight;
-}
-
-.content {
- h1, h2, h3, h4, h5, h6 {
- line-height: @headingLineHeight;
- font-family: @fontFamilyHeading;
- padding: @headingMargin 0;
- }
-}
-
-.pre-content h1,
-.content h1 {
- .hyphens( auto );
+h1, h2, h3, h4, h5, h6 {
font-family: @fontFamilyHeading;
- font-size: @fontSizeH1;
- -ms-word-break: normal;
- word-break: normal;
+ line-height: @headingLineHeight;
+
word-wrap: break-word;
+
+ // This value isn't valid per the specification [0] but fixes the
behaviour in
+ // Google Chrome (45.0.2454.93), and, likely, other browsers too.
+ //
+ // [0] https://drafts.csswg.org/css-text-3/#propdef-word-break
+ word-break: break-word;
+}
+
+// Deliberately not applied to h1
+h2, h3, h4, h5, h6 {
+ padding: @headingMargin 0;
+}
+
+h1 {
+ font-size: @fontSizeH1;
}
h2 {
--
To view, visit https://gerrit.wikimedia.org/r/240370
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0b7fc8b5d2a58fbb6b85a64257e204c979cc246a
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Phuedx <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
