You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: This article will show you how to customize the button that launches the Immersive Reader.
4
+
description: Learn how to customize the button that launches the Immersive Reader app.
5
5
#services: cognitive-services
6
-
author: rwallerms
6
+
author: sharmas
7
7
manager: nitinme
8
8
9
9
ms.service: azure-ai-immersive-reader
10
10
ms.topic: how-to
11
-
ms.date: 03/08/2021
12
-
ms.author: rwaller
11
+
ms.date: 02/23/2024
12
+
ms.author: sharmas
13
13
---
14
14
15
15
# How to customize the Immersive Reader button
16
16
17
-
This article demonstrates how to customize the button that launches the Immersive Reader to fit the needs of your application.
17
+
This article demonstrates how to customize the button that launches the Immersive Reader, to fit the needs of your application.
18
18
19
19
## Add the Immersive Reader button
20
20
21
-
The Immersive Reader SDK provides default styling for the button that launches the Immersive Reader. Use the `immersive-reader-button` class attribute to enable this styling.
21
+
The [Immersive Reader SDK](https://github.com/microsoft/immersive-reader-sdk) provides default styling for the button that launches the Immersive Reader. To enable this styling, use the `immersive-reader-button` class attribute.
22
22
23
23
```html
24
24
<divclass='immersive-reader-button'></div>
25
25
```
26
26
27
27
## Customize the button style
28
28
29
-
Use the `data-button-style` attribute to set the style of the button. The allowed values are `icon`, `text`, and `iconAndText`. The default value is `icon`.
29
+
To set the style of the button, use the `data-button-style` attribute. The allowed values are `icon`, `text`, and `iconAndText`. The default value is `icon`.
The size of the Immersive Reader icon can be configured using the `data-icon-px-size` attribute. This sets the size of the icon in pixels. The default size is 20px.
71
+
To configure the size of the Immersive Reader icon, use the `data-icon-px-size` attribute. This sets the size of the icon in pixels. The default size is 20 px.
Copy file name to clipboardExpand all lines: articles/ai-services/immersive-reader/how-to-prepare-html.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,23 @@
1
1
---
2
2
title: "How to prepare HTML content for Immersive Reader"
3
3
titleSuffix: Azure AI services
4
-
description: Learn how to launch the Immersive reader using HTML, JavaScript, Python, Android, or iOS. Immersive Reader uses proven techniques to improve reading comprehension for language learners, emerging readers, and students with learning differences.
5
-
author: rwallerms
4
+
description: Learn how to structure HTML and retrieve your content for use with Immersive Reader.
5
+
author: sharmas
6
6
manager: nitinme
7
7
ms.service: azure-ai-immersive-reader
8
8
ms.custom: devx-track-js, devx-track-python
9
9
ms.topic: how-to
10
-
ms.date: 03/04/2021
11
-
ms.author: rwaller
10
+
ms.date: 02/23/2024
11
+
ms.author: sharmas
12
12
---
13
13
14
14
# How to prepare HTML content for Immersive Reader
15
15
16
-
This article shows you how to structure your HTML and retrieve the content, so that it can be used by Immersive Reader.
16
+
This article shows you how to structure your HTML and retrieve the content, so that your Immersive Reader application can use it.
17
17
18
18
## Prepare the HTML content
19
19
20
-
Place the content that you want to render in the Immersive Reader inside of a container element. Be sure that the container element has a unique `id`. The Immersive Reader provides support for basic HTML elements, see the [reference](reference.md#html-support) for more information.
20
+
Place the content that you want to render in the Immersive Reader inside of a container element. Be sure that the container element has a unique `id`. To learn more about how the Immersive Reader provides support for basic HTML elements, see the [SDK reference](reference.md#html-support).
title: Store user preferences for Immersive Reader
3
3
titleSuffix: Azure AI services
4
-
description: This article will show you how to store the user's preferences.
5
-
author: rwallerms
4
+
description: Learn how to store user preferences via the Immersive Reader SDK options.
5
+
author: sharmas
6
6
manager: nitinme
7
7
8
8
ms.service: azure-ai-immersive-reader
9
9
ms.topic: how-to
10
-
ms.date: 06/29/2020
11
-
ms.author: rwaller
10
+
ms.date: 02/23/2024
11
+
ms.author: sharmas
12
12
---
13
13
14
14
# How to store user preferences
15
15
16
-
This article demonstrates how to store the user's UI settings, formally known as **user preferences**, via the [-preferences](./reference.md#options) and [-onPreferencesChanged](./reference.md#options) Immersive Reader SDK options.
16
+
This article demonstrates how to store the user's UI settings, or *user preferences*, via the [-preferences](./reference.md#options) and [-onPreferencesChanged](./reference.md#options) Immersive Reader SDK options.
17
17
18
-
When the [CookiePolicy](./reference.md#cookiepolicy-options) SDK option is set to *Enabled*, the Immersive Reader application stores the **user preferences** (text size, theme color, font, and so on) in cookies, which are local to a specific browser and device. Each time the user launches the Immersive Reader on the same browser and device, it will open with the user's preferences from their last session on that device. However, if the user opens the Immersive Reader on a different browser or device, the settings will initially be configured with the Immersive Reader's default settings, and the user will have to set their preferences again, and so on for each device they use. The `-preferences` and `-onPreferencesChanged` Immersive Reader SDK options provide a way for applications to roam a user's preferences across various browsers and devices, so that the user has a consistent experience wherever they use the application.
18
+
When the [CookiePolicy](./reference.md#cookiepolicy-options) SDK option is set to *Enabled*, the Immersive Reader application stores user preferences, such as text size, theme color, and font, by using cookies. These cookiesare local to a specific browser and device. Each time the user launches the Immersive Reader on the same browser and device, it opens with the user's preferences from their last session on that device. However, if the user opens the Immersive Reader app on a different browser or device, the settings are initially configured with the Immersive Reader's default settings, and the user needs to set their preferences again for each device they use. The `-preferences` and `-onPreferencesChanged` Immersive Reader SDK options provide a way for applications to roam a user's preferences across various browsers and devices, so that the user has a consistent experience wherever they use the application.
19
19
20
-
First, by supplying the `-onPreferencesChanged` callback SDK option when launching the Immersive Reader application, the Immersive Reader will send a `-preferences` string back to the host application each time the user changes their preferences during the Immersive Reader session. The host application is then responsible for storing the user preferences in their own system. Then, when that same user launches the Immersive Reader again, the host application can retrieve that user's preferences from storage, and supply them as the `-preferences` string SDK option when launching the Immersive Reader application, so that the user's preferences are restored.
20
+
First, by supplying the `-onPreferencesChanged` callback SDK option when launching the Immersive Reader application, the Immersive Reader sends a `-preferences` string back to the host application each time the user changes their preferences during the Immersive Reader session. The host application is then responsible for storing the user preferences in their own system. Then, when that same user launches the Immersive Reader again, the host application can retrieve that user's preferences from storage, and supply them as the `-preferences` string SDK option when launching the Immersive Reader application, so that the user's preferences are restored.
21
21
22
-
This functionality may be used as an alternate means to storing **user preferences** in the case where using cookies is not desirable or feasible.
22
+
This functionality can be used as an alternate means to storing user preferences when using cookies isn't desirable or feasible.
23
23
24
24
> [!CAUTION]
25
-
> **IMPORTANT** Do not attempt to programmatically change the values of the `-preferences` string sent to and from the Immersive Reader application as this may cause unexpected behavior resulting in a degraded user experience for your customers. Host applications should never assign a custom value to or manipulate the `-preferences` string. When using the `-preferences` string option, use only the exact value that was returned from the `-onPreferencesChanged` callback option.
25
+
> Don't attempt to programmatically change the values of the `-preferences` string sent to and from the Immersive Reader application because this might cause unexpected behavior resulting in a degraded user experience. Host applications should never assign a custom value to or manipulate the `-preferences` string. When using the `-preferences` string option, use only the exact value that was returned from the `-onPreferencesChanged` callback option.
26
26
27
-
## How to enable storing user preferences
27
+
## Enable storing user preferences
28
28
29
-
the Immersive Reader SDK [launchAsync](./reference.md#launchasync)`options` parameter contains the `-onPreferencesChanged` callback. This function will be called anytime the user changes their preferences. The `value` parameter contains a string, which represents the user's current preferences. This string is then stored, for that user, by the host application.
29
+
The Immersive Reader SDK [launchAsync](./reference.md#launchasync)`options` parameter contains the `-onPreferencesChanged` callback. This function is called anytime the user changes their preferences. The `value` parameter contains a string, which represents the user's current preferences. This string is then stored, for that user, by the host application.
## How to load user preferences into the Immersive Reader
41
+
## Load user preferences
42
42
43
-
Pass in the user's preferences to the Immersive Reader using the `-preferences` option. A trivial example to store and load the user's preferences is as follows:
43
+
Pass in the user's preferences to the Immersive Reader app by using the `-preferences` option. A trivial example to store and load the user's preferences is as follows:
0 commit comments