Aya End Of Verse Symbol in SwiftUI [duplicate] - swiftui

Question

I'm working on android application and I'm trying to write arabic number inside arabic end of ayah symbol (۝) into textview.
I've tried to write the end of ayah symbol then the arabic number without any space but it didn't work. I'm using uthmani font.
I want to display it like this picture:
This is part of the code
NumberFormat nf = NumberFormat.getInstance(Locale.forLanguageTag("AR"));
temp+=" "+"\u06DD"+String.valueOf(nf.format(count))+" ";
"\u06DD" is the encoding of (۝) in java.
The result became like this:

Answer 1

You can use font named me_quran with these unicodes U+FD3E + numbers + U+FD3F
﴿ ORNATE RIGHT PARENTHESIS Unicode: U+FD3F, UTF-8: EF B4 BF
﴾ ORNATE LEFT PARENTHESIS Unicode: U+FD3E, UTF-8: EF B4 BE
You can download the font file from here
Example of usage:

Answer 2

Try something like this ﴾١٩٦﴿ which looks like ﴾١٩٦﴿

Answer 3

I just reversed the format and it worked
NumberFormat nf = NumberFormat.getInstance(Locale.forLanguageTag("AR"));
textView.setText(String.valueOf(nf.format(285))+"\u06DD");
(font was roboto)

Answer 4

In Flutter, you can use quran package. getVerseEndSymbol(int verseNumber) function will return aya end symbol with the given verse number.
Example:
Text(
quran.getVerse(18, index + 1) + getVerseEndSymbol(index + 1),
textAlign: TextAlign.right,
),
This will return the symbol with the given verse number.

Answer 5

If you are using uthmanic font "KFGQPC Uthmanic Script HAFS Regular", you just enter a number in arabic like this "٤٤" and it will be rendered as end verse symbol with the number:

Answer 6

for swift use this code for quran aya ending code addition:
let arabicAyaStyle = "\u{FD3F}" + "\(getArabicDigitFor(value:verseObj.verseId))" + "\u{FD3E}"
append arabicAyaStyle to end of any aya text.
func getArabicDigitFor(value:Int) -> String
{
let numberToConvert = NSNumber(value: value)
let formatter = NumberFormatter()
let arLocale = Locale(identifier: "ar")
formatter.locale = arLocale
return formatter.string(from: numberToConvert)!
}

Answer 7

You can use ReplacementSpan to alter how the aya number is rendered
for example this is how I did it
public class EndOfAyaSpan extends ReplacementSpan
{
public RoundedBackgroundSpan(Context context)
{
super();
}
#Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint)
{
float textSize = paint.getTextSize();
canvas.drawText("\u06dd ", 0, 1, x - textSize / 5, (float) y, paint);
paint.setTextSize(textSize - textSize / 3);
canvas.drawText(text, start, end, x, y - textSize / 5, paint);
paint.setTextSize(textSize);
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm)
{
return Math.round(paint.measureText(text, start, end));
}
}