How to Highlight Arabic text after search with continuity in MAUI

Faiz Quraishi 145 Reputation points
2024-09-18T16:36:29.26+00:00

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 Margin="2" VerticalOptions="StartAndExpand" >

<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

<span style='font-family:AlQalamnew;font-size: 22px;text-align: center;' ><span style='color:red;'><strong>الل</strong></span>ہ کے نام سے جو رحمان و رحیم ہے<span>

How can i achieve it with label

FormattingArabicText

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,482 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.