From c1485615bb208418057b7e1d8f410a7a5d356d92 Mon Sep 17 00:00:00 2001
From: Nicholas Ray <nray@wikimedia.org>
Date: Tue, 2 Oct 2018 23:17:48 -0600
Subject: [PATCH] Enable Dynamic Type in iOS 9+ browsers

Dynamic Type is a feature in iOS that lets users pick their reading size
so that apps can adjust their text size accordingly. This commit makes
the mobile site hook into that feature. If you go to
settings > Accessibility > Larger Text in iOS and increase or decrease
the reading size, the mobile site will now increase / decrease
its text size relative to that setting.

Notable changes:

* Moved `font-size: 100% * @fontScalingFactor` from html to body. This
rule would override Dynamic Type sizing which would effectively disable
it. Moving it to the body makes the rule be relative to Dynamic Type
instead of overriding it in iOS browsers while browsers that don't
support Dynamic Type should observe no visible changes.

* Removed intermediate variable @bodyLineHeight because it was only
being used in one place.

* Added @font-size-body-mobile and made it based on % instead of em
(which is what @font-size-body uses). @font-size-mobile-bod is used by a
media query in browsers that support Dynamic Type and by another media
query in browsers that don't support Dynamic Type.

* Added a feature query for Dynamic Type which will make Dynamic Type CSS
rules only affect browsers that support Dynamic Type. This limits the
feature to iOS 9+ feature but ensures that the css rules don't affect
browsers that don't support Dynamic Type.

* Scaled down Dynamic Type so that its default size would appear
identical to the common browser default text size of 16px. By not doing
this, the default font size in iOS browsers would be 17px (Dynamic
Type's default) and would appear 1px larger than Android browsers.

Bug: T204807
Change-Id: I8a4d621dba8dc56190bd8c974543d08dd374ba5e
---
 .../skins.minerva.content.styles/main.less    | 36 ++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/resources/skins.minerva.content.styles/main.less b/resources/skins.minerva.content.styles/main.less
index a6464b4d1..1a426bfba 100644
--- a/resources/skins.minerva.content.styles/main.less
+++ b/resources/skins.minerva.content.styles/main.less
@@ -10,14 +10,14 @@
 html {
 	// prevent font scaling in landscape in Safari
 	-webkit-text-size-adjust: none;
-	font-size: 100% * @fontScalingFactor;
 }
 
-@bodyLineHeight: 1.4;
+@font-size-body: 100% * @fontScalingFactor;
 
 body {
 	font-family: @fontFamily;
-	line-height: @bodyLineHeight;
+	font-size: @font-size-body;
+	line-height: 1.4;
 	color: @colorGray2;
 	background: #fff;
 	-webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 );
@@ -41,9 +41,11 @@ body {
 	}
 }
 
+@font-size-body-mobile: 0.8 * @font-size-body;
+
 @media all and ( max-width: @width-breakpoint-mobile - 1 ) {
 	body {
-		font-size: 0.8em;
+		font-size: @font-size-body-mobile;
 	}
 
 	.content {
@@ -75,3 +77,29 @@ body {
 		}
 	}
 }
+
+// Support iOS 9+ browsers: Enable Dynamic Type resizing, see
+// http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type
+// & T204807.
+@supports ( font: -apple-system-body ) {
+	html {
+		font: -apple-system-body;
+	}
+
+	// Most iOS browsers' default font size is 16px but Dynamic Type's default
+	// font size is 17px. We need to scale down @font-size-body and
+	// @font-size-body-mobile by this ratio in order to make them relative to these
+	// browsers' defaults again. By doing this, the default Dynamic Type text size
+	// will appear identical to the browser's default text size.
+	@dynamicTypeScalingFactor: 16 / 17;
+
+	body {
+		font-size: @font-size-body * @dynamicTypeScalingFactor;
+	}
+
+	@media all and ( max-width: @width-breakpoint-mobile - 1 ) {
+		body {
+			font-size: @font-size-body-mobile * @dynamicTypeScalingFactor;
+		}
+	}
+}