Skip to content

docs(layout): update dynamic font scaling for v8 #3447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 14, 2024
Merged

docs(layout): update dynamic font scaling for v8 #3447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b93afc2
docs(dfs): update docs
liamdebeasi Feb 13, 2024
4a6c1a3
update playgrounds due to new default
liamdebeasi Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 4 additions & 30 deletions docs/layout/dynamic-font-scaling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

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.

Dynamic Font Scaling is supported on Android, iOS, and iPadOS starting in Ionic v7.5.

## Try It Out

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

<DynamicFontScaling />

## Enabling Dynamic Font Scaling in Ionic

:::info
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.
:::

Dynamic Font Scaling is already enabled by default on Android. Developers can enable it on iOS using the following steps:

1. Ensure that the [typography.css](/docs/layout/global-stylesheets#typographycss) file is imported.
2. Add the following CSS to a global stylesheet:

```css
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
}
```

:::note
Under the hood, Ionic sets the following CSS on iOS devices to enable Dynamic Font Scaling:

```css
html {
font: var(--ion-dynamic-font);
}
```
## Using Dynamic Font Scaling

:::
### Enabling in an Application

## Using Dynamic Font Scaling
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.

### Integrating Custom Components

Expand Down Expand Up @@ -192,7 +166,7 @@ The Chrome Web Browser on Android has some limitations with respecting system-le
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.

1. Verify that your version of Ionic supports Dynamic Font Scaling. Dynamic Font Scaling was added starting in Ionic v7.5.
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.
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.
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.
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.
5. Verify "Accessibility Page Zoom" is enabled if using Chrome for Android. See [Chrome for Android](#chrome-for-android) for more information.
Expand Down
0 ...scaling/angular/example_component_html.md → ...v8/layout/dynamic-font-scaling/angular.md
View file
Open in desktop
File renamed without changes.
5 changes: 0 additions & 5 deletions static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md
View file
Open in desktop

This file was deleted.

7 changes: 1 addition & 6 deletions static/usage/v8/layout/dynamic-font-scaling/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label</title>
<title>Dynamic Font Scaling</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script
Expand All @@ -14,11 +14,6 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"
/>
<style>
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
}
</style>
</head>

<body>
Expand Down
23 changes: 4 additions & 19 deletions static/usage/v8/layout/dynamic-font-scaling/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,17 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import react from './react.md';
import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_global_css from './angular/global_css.md';
import angular from './angular.md';

<Playground
version="8"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
react,
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/global.css': angular_global_css,
},
},
angular,
}}
src="usage/v8/layout/dynamic-font-scaling/demo.html"
devicePreview={true}
Expand Down
6 changes: 0 additions & 6 deletions static/usage/v8/layout/dynamic-font-scaling/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,4 @@
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>

<style>
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
}
</style>
```
0 ...ut/dynamic-font-scaling/react/main_tsx.md → ...e/v8/layout/dynamic-font-scaling/react.md
View file
Open in desktop
File renamed without changes.
5 changes: 0 additions & 5 deletions static/usage/v8/layout/dynamic-font-scaling/react/main_css.md
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions static/usage/v8/layout/dynamic-font-scaling/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,4 @@
},
});
</script>

<style>
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
}
</style>
```