Skip to content
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

Update text.md under dotnet #1767

Merged
merged 3 commits into from
Feb 7, 2023
+23 −23
Merged

Update text.md under dotnet #1767

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
08c17bc
Update text.md
omar-srbd Jan 31, 2023
c81c243
Update text.md
omar-srbd Feb 1, 2023
1613c56
Apply suggestions from review (1)
omar-srbd Feb 1, 2023
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
48 changes: 24 additions & 24 deletions docs/application/dotnet/guides/user-interface/nui/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ keyword: text, property, character, style, TextLabel, font, label, TextField, St

# Text

There are three text components to display and edit text on the screen:
There are three text components to display and edit text on the screen, they are as follows:

- The [TextLabel](#textLabel) displays a short text string.

Expand All @@ -21,7 +21,7 @@ There are three text components to display and edit text on the screen:
xmlns:base="clr-namespace:Tizen.NUI.BaseComponents;assembly=Tizen.NUI"
```

The `TextLabel` class is lightweight, non-editable, and does not respond to user input. Text labels support multiple languages and scripts including right-to-left scripts such as Arabic. For more information on how to display a text using a text label, see [NUI Hello World Tutorial](../../../get-started/first-app.md).
The `TextLabel` class is lightweight, non-editable, and does not respond to user input. Text labels support multiple languages and scripts including right-to-left scripts such as Arabic. For more information on how to display a text using a text label, see [NUI hello world tutorial](../../../get-started/first-app.md).

**Figure: Text label positioned to top left**

Expand All @@ -30,7 +30,7 @@ The `TextLabel` class is lightweight, non-editable, and does not respond to user
<a name="create"></a>
### Create TextLabel

To create a text label:
To create a text label, follow the steps below:

1. Create an instance of the `TextLabel` class and define the label text as a parameter. To make text visible, set the `TextColor` property to `Color.White`:

Expand Down Expand Up @@ -60,13 +60,13 @@ To create a text label:
<a name="font"></a>
### Set font of TextLabel

You can request a specific font using the `FontFamily`, the `FontStyle`, and the `PointSize` properties of the `TextLabel` class:
You can request a specific font using the `FontFamily`, the `FontStyle`, and the `PointSize` properties of the `TextLabel` class. The properties are described below:

- `FontFamily` is a string with the font family name, such as `FreeSerif`.
- `FontStyle` is a JSON-formatted string with the font style. The following list describes some possible keys and common values for them:
- The `width` key defines the width occupied by each glyph. Some commonly-used values include `condensed`, `semiCondensed`, `normal`, `semiExpanded`, and `expanded`.
- The `weight` key defines the thickness or darkness of the glyphs. Some commonly-used values include `thin`, `light`, `normal`, `regular`, `medium`, and `bold`.
- The `slant` key defines whether to use italics. Some commonly-used values include `normal`, `roman`, `italic`, and `oblique`.
- The `width` key defines the width occupied by each glyph. Some commonly used values include `condensed`, `semiCondensed`, `normal`, `semiExpanded`, and `expanded`.
- The `weight` key defines the thickness or darkness of the glyphs. Some commonly used values include `thin`, `light`, `normal`, `regular`, `medium`, and `bold`.
- The `slant` key defines whether to use italics. Some commonly used values include `normal`, `roman`, `italic`, and `oblique`.

> [!NOTE]
> Usually `italic` is a separate font, while `oblique` is generated by applying a slant to the `normal` font.
Expand Down Expand Up @@ -96,7 +96,7 @@ The following example code specifies the font properties:
</TextLabel>
```

If no font is specified, default styles are used, and a suitable font for displaying the text label is automatically selected from the platform. However, the automatically-selected font may not render all the characters contained within the text label. For example, Latin fonts often do not provide Arabic glyphs.
If no font is specified, default styles are used, and a suitable font for displaying the text label is automatically selected from the platform. However, the automatically selected font may not render all the characters contained within the text label. For example, Latin fonts often do not provide Arabic glyphs.

### Set font styles of TextLabel

Expand Down Expand Up @@ -136,15 +136,15 @@ You can provide further flexibility for the various screens by mapping the logic

### Align text in TextLabel

To align the text in a text label:
To align the text in a text label, follow these steps:

- To enable text wrapping, use the `MultiLine` property of the `TextLabel` class:
1. To enable text wrapping, use the `MultiLine` property of the `TextLabel` class:

```xaml
<base:TextLabel x:Name="txt" Text="Hello world" MultiLine="True"/>
```

- To align the text horizontally to the beginning, center, or end of the available area, set the `HorizontalAlignment` property of the `TextLabel` class with the corresponding value of the [HorizontalAlignment](/application/dotnet/api/TizenFX/latest/api/Tizen.NUI.HorizontalAlignment.html) enumeration:
2. To align the text horizontally to the beginning, center, or end of the available area, set the `HorizontalAlignment` property of the `TextLabel` class with the corresponding value of the [HorizontalAlignment](/application/dotnet/api/TizenFX/latest/api/Tizen.NUI.HorizontalAlignment.html) enumeration:

```xaml
<base:TextLabel x:Name="txt" Text="Hello world" HorizontalAlignment="Begin"/>
Expand All @@ -160,9 +160,9 @@ To align the text in a text label:
|`Center` | ![Latin script aligned to center](media/LatinCenter.png) | ![Arabic script aligned to center](media/ArabicCenter.png) |
| `End` | ![Latin script aligned to end](media/LatinEnd.png) | ![Arabic script aligned to end](media/ArabicEnd.png) |

### UTF16 or UTF32 character encoding
### UTF-16 or UTF-32 character encoding

The text property can accept UTF16 or UTF32 character encoding:
The text property can accept UTF-16 or UTF-32 character encoding:

```xaml
<base:TextLabel x:Name="txt"/>
Expand All @@ -175,9 +175,9 @@ txt.Text += "\ud83d\ude01"; //UTF-16

### Use decorations for TextLabel

To use the text decoration, set the applicable property:
To use the text decoration, set the applicable property as described below:

- To add a drop shadow to the text, set the `Shadow` property:
1. To add a drop shadow to the text, set the `Shadow` property:

```xaml
<base:TextLabel x:Name="txt" Text="Text with Color Shadow"/>
Expand All @@ -196,7 +196,7 @@ To use the text decoration, set the applicable property:

Shadow parameters can also be set using a JSON string.

- To underline the text label, set the `Underline` property:
2. To underline the text label, set the `Underline` property:

```xaml
<base:TextLabel x:Name="txt" Text="Text with Underline" TextColor="White">
Expand Down Expand Up @@ -239,7 +239,7 @@ To use the text decoration, set the applicable property:

![Text with color underline](media/TextWithColorUnderline.png)

- To enable text scrolling, set the `EnableAutoScroll` property to `True`:
3. To enable text scrolling, set the `EnableAutoScroll` property to `True`:

```xaml
<base:TextLabel x:Name="txt" EnableAutoScroll="True">
Expand Down Expand Up @@ -307,7 +307,7 @@ The following markup elements are currently supported:
- `width`: Font width
- `slant`: Font slant

For more information on the attribute values, see [Select Font](#font).
For more information on the attribute values, see [select font](#font).

The following example sets the font family and weight:

Expand Down Expand Up @@ -479,16 +479,16 @@ The following markup elements are currently supported:

### Use markup to represent encoded characters

Markup text is not allowed to contain some characters unless they are representing tags or entities such as "<", ">" or "&". To include these characters as a part of the text, you must use reserved entities such as `&lt;`, `&gt;`, or `&amp;`. The following example uses reserved entities:
Markup text is not allowed to contain some characters unless they are representing tags or entities such as "<", ">", or "&". To include these characters as a part of the text, you must use reserved entities such as `&lt;`, `&gt;`, or `&amp;`. The following example uses reserved entities:

```xaml
<base:TextLabel x:Name="txt" EnableMarkup="True" Text="&lt;&gt;"/>
```

Markup text can include character with UTF32 representation as entities contain decimal or hexadecimal values.
Markup text can include character with UTF-32 representation as entities contain decimal or hexadecimal values.
To represent decimal value, you can use: `&#` + `utf32_decimal_value` + `;`
To represent hexadecimal value, you can use: `&#x` + `utf32_hexadecimal_value` + `;`
The following example uses UTF32 entities:
The following example uses UTF-32 entities:

```xaml
<base:TextLabel x:Name="txt" EnableMarkup="True" Text="&#9786; &#x263a;"/>
Expand All @@ -511,7 +511,7 @@ For text decorations, the `TextLabel` class provides several properties. All the
| `TextColor` | Color | Specifies the color of the text. |
| `Shadow` | PropertyMap | Specifies the shadow of the text. |
| `Underline` | PropertyMap | Specifies underline of the text. |
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.<br>**Note**: By default, the markup string is disabled. |
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.**Note**: By default, the markup string is disabled. |
| `EnableAutoScroll` | Boolean | Specifies whether to enable or disable the auto scrolling. |
| `AutoScrollSpeed` | Integer | Specifies the scrolling speed in pixels per second. |
| `AutoScrollLoopCount` | Integer | Specifies the number of complete loops to scroll, when scrolling is enabled. |
Expand Down Expand Up @@ -641,7 +641,7 @@ For text decorations, the following `TextField` class properties are available.
| `DecorationBoundingBox` | Rectangle | Specifies the position of decoration such as handles and so on within the on-screen area. |
| `InputMethodSettings` | PropertyMap | Specifies the settings related to the system input method, key, and value. |
| `InputColor` | Vector4 | Specifies the color of the new input text. |
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.<br>**Note**: By default, the markup string is disabled. |
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.**Note**: By default, the markup string is disabled. |
| `InputFontFamily` | String | Specifies the font family of the new input text. |
| `InputFontStyle` | PropertyMap | Specifies the font style of the new input text. |
| `InputPointSize` | Float | Specifies the font size of the new input text in points. |
Expand Down Expand Up @@ -727,7 +727,7 @@ The following table lists the available `TextEditor` properties:
| `SelectionHandleMarkerImageRight` | PropertyMap | Specifies the display image used for the right selection handle marker. |
| `SelectionHighlightColor` | Vector4 | Specifies the selected highlight color. |
| `DecorationBoundingBox` | Rectangle | Specifies the position of decoration such as handles and so on within the on-screen area.|
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.<br>**Note**: By default, the markup string is disabled. |
| `EnableMarkup` | Boolean | Specifies whether to enable or disable the markup string to process text within the markup tags using DALi application.**Note**: By default, the markup string is disabled. |
| `InputColor` | Vector4 | Specifies the color of the new input text. |
| `InputFontFamily` | String | Specifies the font family of the new input text. |
| `InputFontStyle` | PropertyMap | Specifies the font style of the new input text. |
Expand Down