Skip to content

Commit 886811f

Browse files
liamdebeasiliamdebeasi
authored
docs(layout): update dynamic font scaling for v8 (#3447)
1 parent b863341 commit 886811f

File tree

9 files changed

+9
-77
lines changed

9 files changed

+9
-77
lines changed

‎docs/layout/dynamic-font-scaling.md

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
Dynamic Font Scaling is a feature that allows users to choose the size of the text displayed on the screen. This helps users who need larger text for better readability, and it also accommodates users who can read smaller text.
44

5-
Dynamic Font Scaling is supported on Android, iOS, and iPadOS starting in Ionic v7.5.
6-
75
## Try It Out
86

97
:::tip
@@ -18,35 +16,11 @@ import DynamicFontScaling from '@site/static/usage/v8/layout/dynamic-font-scalin
1816

1917
<DynamicFontScaling />
2018

21-
## Enabling Dynamic Font Scaling in Ionic
22-
23-
:::info
24-
This feature is currently opt-in on iOS. However, it will be enabled by default starting in Ionic 8 at which point the following CSS will no longer be necessary.
25-
:::
26-
27-
Dynamic Font Scaling is already enabled by default on Android. Developers can enable it on iOS using the following steps:
28-
29-
1. Ensure that the [typography.css](/docs/layout/global-stylesheets#typographycss) file is imported.
30-
2. Add the following CSS to a global stylesheet:
31-
32-
```css
33-
html {
34-
--ion-dynamic-font: var(--ion-default-dynamic-font);
35-
}
36-
```
37-
38-
:::note
39-
Under the hood, Ionic sets the following CSS on iOS devices to enable Dynamic Font Scaling:
40-
41-
```css
42-
html {
43-
font: var(--ion-dynamic-font);
44-
}
45-
```
19+
## Using Dynamic Font Scaling
4620

47-
:::
21+
### Enabling in an Application
4822

49-
## Using Dynamic Font Scaling
23+
Dynamic Font Scaling is enabled by default as long as the [typography.css](/docs/layout/global-stylesheets#typographycss) file is imported. Importing this file will define the `--ion-dynamic-font` variable which will activate Dynamic Font Scaling. While not recommended, developers can opt-out of Dynamic Font Scaling by setting this variable to `initial` in their application code.
5024

5125
### Integrating Custom Components
5226

@@ -192,7 +166,7 @@ The Chrome Web Browser on Android has some limitations with respecting system-le
192166
There are a number of reasons why Dynamic Font Scaling may not have any effect on an app. The following list, while not exhaustive, provides some things to check to debug why Dynamic Font Scaling is not working.
193167

194168
1. Verify that your version of Ionic supports Dynamic Font Scaling. Dynamic Font Scaling was added starting in Ionic v7.5.
195-
2. Dynamic Font Scaling is opt-in on iOS in Ionic 7. Verify that the proper CSS has been set. See [Enabling Dynamic Font Scaling in Ionic](#enabling-dynamic-font-scaling-in-ionic) for more information.
169+
2. Verify that the [typography.css](/docs/layout/global-stylesheets#typographycss) file has been imported. This file is required for Dynamic Font Scaling to work.
196170
3. Verify that your code does not override the root element's default font size. Manually setting a font size on the root element will prevent Dynamic Font Scaling from working as intended.
197171
4. Verify that your code does not override font sizes on Ionic components. Ionic components that set `font-size` rules will use `rem` units. However, if your app overrides that to use `px`, then that custom rule will need to be converted to use `rem`. See [Integrating Custom Components](#integrating-custom-components) for more information.
198172
5. Verify "Accessibility Page Zoom" is enabled if using Chrome for Android. See [Chrome for Android](#chrome-for-android) for more information.

‎static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md renamed to ‎static/usage/v8/layout/dynamic-font-scaling/angular.md

File renamed without changes.

‎static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎static/usage/v8/layout/dynamic-font-scaling/demo.html

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Label</title>
6+
<title>Dynamic Font Scaling</title>
77
<link rel="stylesheet" href="../../common.css" />
88
<script src="../../common.js"></script>
99
<script
@@ -14,11 +14,6 @@
1414
rel="stylesheet"
1515
href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"
1616
/>
17-
<style>
18-
html {
19-
--ion-dynamic-font: var(--ion-default-dynamic-font);
20-
}
21-
</style>
2217
</head>
2318

2419
<body>

‎static/usage/v8/layout/dynamic-font-scaling/index.md

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
import Playground from '@site/src/components/global/Playground';
22

33
import javascript from './javascript.md';
4-
5-
import react_main_tsx from './react/main_tsx.md';
6-
import react_main_css from './react/main_css.md';
7-
4+
import react from './react.md';
85
import vue from './vue.md';
9-
10-
import angular_example_component_html from './angular/example_component_html.md';
11-
import angular_global_css from './angular/global_css.md';
6+
import angular from './angular.md';
127

138
<Playground
149
version="8"
1510
code={{
1611
javascript,
17-
react: {
18-
files: {
19-
'src/main.tsx': react_main_tsx,
20-
'src/main.css': react_main_css,
21-
},
22-
},
12+
react,
2313
vue,
24-
angular: {
25-
files: {
26-
'src/app/example.component.html': angular_example_component_html,
27-
'src/global.css': angular_global_css,
28-
},
29-
},
14+
angular,
3015
}}
3116
src="usage/v8/layout/dynamic-font-scaling/demo.html"
3217
devicePreview={true}

‎static/usage/v8/layout/dynamic-font-scaling/javascript.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,4 @@
4242
<ion-title>Footer</ion-title>
4343
</ion-toolbar>
4444
</ion-footer>
45-
46-
<style>
47-
html {
48-
--ion-dynamic-font: var(--ion-default-dynamic-font);
49-
}
50-
</style>
5145
```

‎static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md renamed to ‎static/usage/v8/layout/dynamic-font-scaling/react.md

File renamed without changes.

‎static/usage/v8/layout/dynamic-font-scaling/react/main_css.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎static/usage/v8/layout/dynamic-font-scaling/vue.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,4 @@
8989
},
9090
});
9191
</script>
92-
93-
<style>
94-
html {
95-
--ion-dynamic-font: var(--ion-default-dynamic-font);
96-
}
97-
</style>
9892
```

0 commit comments

Comments
 (0)