How to Highlight Arabic text after search with continuity in MAUI

Faiz Quraishi 105

I am using Visual studio 2022 MAUI 8.0 API 33

I am using WebView and label as shown below where WebView is properly highlighting

arabic text after search with searched item while label is not showing highlighted text properly.

<WebView.Source>

    <HtmlWebViewSource Html="{Binding Arabictext}" />

</WebView.Source>

</WebView>

<Label FontSize="22" FontFamily="AlQalamnew" Padding="5" LineHeight="1.5" LineBreakMode="WordWrap" Margin="2"

   HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FlowDirection="RightToLeft" >

<Label.FormattedText>

    <FormattedString>

        <!-- Bind the text before the match -->

        <Span Text="{Binding TextBeforeMatch}" FontSize="22" FontFamily="AlQalamnew" />

        <!-- Highlight the matched text -->

        <Span Text="{Binding MatchedText}" FontAttributes="Bold"

          TextColor="{StaticResource Yellow}" FontSize="22" FontFamily="AlQalamnew" />

        <!-- Bind the text after the match -->

        <Span Text="{Binding TextAfterMatch}" FontSize="22" FontFamily="AlQalamnew" />

    </FormattedString>

</Label.FormattedText>

</Label>

As using webview inside collection view to show searched item text data i am facing issue like

webview is occupying xtra space even if setting alignment to zero.Also when back button pressed and loading previous content in webview multiple fluctuations are coming

In label I am spliting the text into before matched ,matched and after matched string content.

But in label content the continuity of Arabic text is disconnected.

While its perfect in WebView.

Sample Arabic text is below

اللہ کے نام سے جو رحمان و رحیم ہے

How can i achieve it with label

FormattingArabicText

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 42,081 Reputation points Microsoft Vendor

2024-09-19T06:09:48.89+00:00
webview is occupying xtra space even if setting alignment to zero.Also when back button pressed and loading previous content in webview multiple fluctuations are coming

Is this an issue with the space being taken up in the StackLayout? For space management issues, it is recommended that you use Grid to allocate the space occupied by controls. You can refer to Grid for more detailed information.

This is because WebView and Label use different length units. In WebView, px is the size unit, while in Label, it is dp. You could refer to Summary of Chapter 5. Dealing with sizes for more details.

Pixels, points, dps, DIPs, and DIUs Early in the histories of the Apple Mac and Microsoft Windows, programmers worked in units of pixels. However, the advent of higher-resolution displays required a more virtualized and abstract approach to screen coordinates. In the Mac world, programmers worked in units of points, traditionally 1/72 inch, while Windows developers used device-independent units (DIUs) based on 1/96 inch. Mobile devices, however, are generally held much closer to the face and have a higher resolution than desktop screens, which implies that a greater pixel density can be tolerated. Programmers targeting Apple iPhone and iPad devices continue to work in units of points, but there are 160 of these points to the inch. Depending on the device, there may be 1, 2, or 3 pixels to the point. Android is similar. Programmers work in units of density-independent pixels (dps), and the relationship between dps and pixels is based on 160 dps to the inch.

Therefore, it is recommended that you convert the fonts in WebView and Label to the same unit and then compare them. If the sizes are still different, it may be that the padding of the parent layout causes the layout to be compressed.

The following shows how to convert between dp and px in Android.

public int dip2px(float dp) { return (int)(dp * DeviceDisplay.Current.MainDisplayInfo.Density + 0.5f); } public int px2dip(float px) { return (int)(px/DeviceDisplay.Current.MainDisplayInfo.Density + 0.5f); }
Faiz Quraishi 105 Reputation points

2024-09-19T13:28:32.7666667+00:00

In this issue I am seeking the search content highlight with continuity

as shown above image Webview is continous with highlighted text while

label is discontinued.

Is there any option to get same out put as webview in label.

Thanks

Share via

How to Highlight Arabic text after search with continuity in MAUI

Your answer