From 88e87ca7c918ac35d2e3dfa90924b7f89a4bb15c Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 15 Jul 2019 13:34:01 +0200
Subject: [PATCH] Make text align configurable (#28989)
This was causing issues for RTL, see https://github.com/twbs/bootstrap/issues/28238
---
scss/_reboot.scss | 16 +++++++---------
scss/_variables.scss | 1 +
site/content/docs/4.3/content/reboot.md | 2 +-
3 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 3553c24910..6ff66a0226 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -25,11 +25,9 @@ main {
// Body
//
// 1. Remove the margin in all browsers.
-// 2. Set an explicit initial text-align value so that we can later use
-// the `inherit` value on things like `<th>` elements.
-// 3. As a best practice, apply a default `background-color`.
-// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Change the default tap highlight to be completely transparent in iOS.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 4. Change the default tap highlight to be completely transparent in iOS.
body {
margin: 0; // 1
font-family: $font-family-base;
@@ -37,10 +35,10 @@ body {
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
- text-align: left; // 2
- background-color: $body-bg; // 3
- -webkit-text-size-adjust: 100%; // 4
- -webkit-tap-highlight-color: rgba($black, 0); // 5
+ text-align: $body-text-align;
+ background-color: $body-bg; // 2
+ -webkit-text-size-adjust: 100%; // 3
+ -webkit-tap-highlight-color: rgba($black, 0); // 4
}
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0b1191fe70..146dd7316e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -148,6 +148,7 @@ $negative-spacers: negativify-map($spacers) !default;
$body-bg: $white !default;
$body-color: $gray-900 !default;
+$body-text-align: null !default;
// Links
diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md
index d76489d424..fd7dcbd1ea 100644
--- a/site/content/docs/4.3/content/reboot.md
+++ b/site/content/docs/4.3/content/reboot.md
@@ -24,7 +24,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
- No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.
-- The `<body>` also sets a global `font-family`, `line-height`, and `text-align`. This is inherited later by some form elements to prevent font inconsistencies.
+- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
## Native font stack
--
GitLab