how i can get the styling and fonts as same it is in wordpress website through API and display in Android Fragment?

I am developing a Urdu atricle base Android app where i must have display the articles as it is in website(fonts, font colors and styling) here i will post the API call result and the screenshot of the webpage for better understanding. { "id": 18574, "date": "2024-07-29T13:29:32", "date_gmt": "2024-07-29T08:29:32", "guid": { "rendered": "https://tohed.com/?p=18574" }, "modified": "2024-07-29T13:29:32", "modified_gmt": "2024-07-29T08:29:32", "slug": "%d8%b4%d8%b1%d8%a7%d8%a8-%d9%be%db%8c%d9%86%db%92-%da%a9%db%8c-%da%a9%db%8c%d8%a7-%d8%ad%d8%af-%db%81%db%92-%d8%9f", "status": "publish", "type": "post", "link": "https://tohed.com/%d8%b4%d8%b1%d8%a7%d8%a8-%d9%be%db%8c%d9%86%db%92-%da%a9%db%8c-%da%a9%db%8c%d8%a7-%d8%ad%d8%af-%db%81%db%92-%d8%9f/", "title": { "rendered": "شراب پینے کی کیا حد ہے ؟" }, "content": { "rendered": "<div id="outcntn">\n<div class="btahreer">تحریر: ابو ضیا محمود احمد غضنفر\n <span class="uarabic1w">وَعَنْ أَبِي سَاسَانَ حُضَيْنُ بْنُ الْمُنْذِرِ، قَالَ: شَهِدَتُ عُثْمَانَ بْنَ عَفَّانَ أُتِيَ بِالْوَلِيدِ وَقَدْ صَلَّى الصُّبْحَ رَكْعَتَيْنِ، ثُمَّ قَالَ: أَزِيدَكُمْ؟ فَشَهِدَ عَلَيْهِ رَجُلَانِ أَحَدُهُمَا حُمْرَانُ – أَنَّهُ شَرِبَ الْخَمْرَ وَشَهِدَ الْآخَرُأَنَّهُ رَآهُ يَتَقَيُّو هَا، فَقَالَ عُثْمَانُ: إِنَّهُ لَمْ يَتَقَيَّا <span class="ref"> [هَا] حَتَّى شَرِبَهَا ثُمَّ قَالَ: يَا عَلِيٌّ قُمْ فَاجْلِدُهُ – فَقَالَ عَلِيٌّ: قُمْ يَا حَسَنُ فَاجْلِدُهُ فَقَالَ الْحَسَنُ: وَلِ حَارُهَا مَنْ تَوَلَّى قَارُهَا فَكَانَهُ وَحَدَ عَلَيْهِ فَقَالَ: يَا عَبْدَ اللَّهِ بْنَ جَعْفَرٍ، قُمْ فَاجْلِدُهُ، فَجَلَدَهُ وَعَلِيٌّ يَعُدُّ حَتَّى بَلَغَ أَرْبَعِينَ، فَقَالَ: أَمْسِكُ ثُمَّ قَالَ: ( (جَلَدَ النَّبِيُّ لَهِ أَرْبَعِينَ وَأَبُو بَكْرٍ أَرْبَعِينَ، وَعُمَرُ ثَمَانِينَ، وَكُلُّ سُنَّةٌ وَهُذَا أَحَبُّ إِلَيَّ)) أَخْرَجَهُ مُسْلِمٌ وَحُضَيْنٌ بِالضَّادِ الْمُعْجَمَةِ مِنَ الْأَفْرَادِ) \nابو ساسان، حصین بن منذر سے مروی ہے کہا کہ میں عثمان بن عفان کے پاس حاضر ہوا ایک لڑکے کو لایا گیا وہ صبح کی دو رکعت نماز پڑھ چکا تھا پھر کہا میں مزید آپ کو کرتا ہوں دو آدمیوں نے گواہی دی میں ان سے ایک حمران تھا کہ اس نے شراب پی رکھی تھی اور دوسرے نے گواہی دی کہ اس نے اسے دیکھا اور قے کر رہا تھا حضرت عثمان نے کہا اس نے شراب نہ پی ہوتی تو یہ قے نہ کرتا پھر فرمایا: اے علی اسے کوڑے لگاؤ حضرت علی نے کہا اے حسن اٹھو اسے کوڑے لگاؤ حضرت حسن نے کہا وہ ذمہ دار ہو جو اس کی گرمی کا جو اس کی سردی کا ذم ہدار بنا گویا کہ اس نے اس پر کچھ پایا اس نے کہا اے عبداللہ بن جعفر اٹھو اسے کوڑے لگاؤ اس نے کوڑے لگائے حضرت علی رضی اللہ عنہا گنتی کر رہے تھے یہاں تک کہ چالیس تک پہنچے فرمایا رک۔ جاؤ پھر فرمایا نبی کریم صلی اللہ علیہ وسلم نے چالیس کوڑے لگائے حضرت ابو بکر رضی اللہ عنہ نے چالیس کوڑے لگاتے اور حضرت عمر نے اسی کوڑے لگائے یہ تمام سنت ہے اور یہ مجھے زیادہ پسند ہے۔ اس کو مسلم نے روایت کیا ہے اور حصین یہ ضاد خالی کے ساتھ ہے افراد سے۔ \n<span class="blue1"> تحقيق وتخريج: \n<span class="ref"> [مسلم: 1707] \n<span class="uarabic1w">وَفِي حَدِيثِ الْبُخَارِيِّ: أَمَا مَا ذَكَرْتَ مِنْ شَأْنِ الْوَلِيدِ فَسَنَأْخُذُ فِيهِ بِالْحَقِّ إِنَّ شَاءَ اللهُ، ثُمَّ دَعَا عَلِيًّا فَأَمَرَهُ أَنْ يَجْلِدَهُ، فَجَلَدَهُ ثَمَانِينَ \nبخاری شریف میں یہ الفاظ ہیں کہ جو ولید کی حالت کے بارے میں بیان کیا ہے میں ان شاء اللہ برحق فیصلہ دوں گا پھر علی کو بلایا اور اسے حکم دیا کہ وہ اسے کوڑے لگائے تو اسے اسی کوڑے لگائے۔ \n<span class="blue1"> تحقيق وتخريج: \n<span class="ref"> [بخاري: 3872٬3696] \n<span class="blue1"> فوائد: \n➊ فقہاء کا شراب میں کوڑوں کی حد کے بارے اختلاف ہے۔ بعض چالیس کہتے ہیں اور بعض اسی کوڑے۔ \n➋ زیادہ صحیح بات یہ ہے کہ شراب کی حد چالیس کوڑے ہے۔ \n➌ حضرت عمر رضی اللہ عنہ نے اسی کوڑے والی حد مشاورت سے قائم کی تھی اور وہ اس لیے کہ لوگ چالیس کوڑے کی حد کو کوئی وقعت نہ دیتے تھے۔ \n➍ شراب پینے کا مجرم اعتراف کرلے تو حد لگائی جائے گی۔ عدم اعتراف پر دو گواہوں کی گواہی ضروری ہے ورنہ حد نہیں لگے گی۔ دو گواہ مختلف انداز سے گواہی دے سکتے ہیں۔ مجرم سے اعتراف کر دیا بھی جاسکتا ہے۔ مسجد میں حد کا فیصلہ تو سنایا جا سکتا ہے لیکن اس میں حد لگائی نہیں جاسکتی۔ \n➎ شراب کو صرف پی کر فورا قے کرنے سے بھی حد لازم ہو جاتی ہے۔ چالیس کوڑے نبی کریم صلی اللہ علیہ وسلم اور ابو بکر رضی اللہ عنہ کا فعل بھی ہے۔ خلیفہ وقت اپنے کسی جانشین کو حد لگانے کا حکم جاری کر سکتا ہے۔ ایسے ہی جانشین کسی ذمہ دار آدمی کو حد لگانے کے لیے مقرر کر سکتا ہے۔ جیسے جلاد ہوتا ہے۔ حد کے کوڑوں کو ساتھ ساتھ شمار کرنا ضروری ہے۔ کوڑوں کا شمار کوڑے لگانے والے کے علاوہ دوسرا آدمی بھی کر سکتا ہے۔ کوڑے سبھی کے سامنے لگنے چاہئیں۔ \n\n", "protected": false }, "excerpt": { "rendered": " تحریر: ابو ضیا محمود احمد غضنفر وَعَنْ أَبِي سَاسَانَ حُضَيْنُ بْنُ الْمُنْذِرِ، قَالَ: شَهِدَتُ عُثْمَانَ بْنَ عَفَّانَ أُتِيَ بِالْوَلِيدِ وَقَدْ صَلَّى الصُّبْحَ رَكْعَتَيْنِ، ثُمَّ قَالَ: أَزِيدَكُمْ؟ فَشَهِدَ عَلَيْهِ رَجُلَانِ أَحَدُهُمَا حُمْرَانُ – أَنَّهُ شَرِبَ الْخَمْرَ وَشَهِدَ الْآخَرُأَنَّهُ رَآهُ يَتَقَيُّو هَا، فَقَالَ عُثْمَانُ: إِنَّهُ لَمْ يَتَقَيَّا [هَا] حَتَّى شَرِبَهَا ثُمَّ قَالَ: يَا عَلِيٌّ قُمْ فَاجْلِدُهُ – […] \n", "protected": false }, "author": 18, "featured_media": 0, "comment_status": "open", "ping_status": "open", "sticky": false, "template": "", "format": "standard", "meta": { "footnotes": "" }, "categories": [ 427 ], "tags": [], "class_list": [ "post-18574", "post", "type-post", "status-publish", "format-standard", "hentry", "category-427" ], "_links": { "self": [ { "href": "https://tohed.com/wp-json/wp/v2/posts/18574" } ], "collection": [ { "href": "https://tohed.com/wp-json/wp/v2/posts" } ], "about": [ { "href": "https://tohed.com/wp-json/wp/v2/types/post" } ], "author": [ { "embeddable": true, "href": "https://tohed.com/wp-json/wp/v2/users/18" } ], "replies": [ { "embeddable": true, "href": "https://tohed.com/wp-json/wp/v2/comments?post=18574" } ], "version-history": [ { "count": 1, "href": "https://tohed.com/wp-json/wp/v2/posts/18574/revisions" } ], "predecessor-version": [ { "id": 18576, "href": "https://tohed.com/wp-json/wp/v2/posts/18574/revisions/18576" } ], "wp:attachment": [ { "href": "https://tohed.com/wp-json/wp/v2/media?parent=18574" } ], "wp:term": [ { "taxonomy": "category", "embeddable": true, "href": "https://tohed.com/wp-json/wp/v2/categories?post=18574" }, { "taxonomy": "post_tag", "embeddable": true, "href": "https://tohed.com/wp-json/wp/v2/tags?post=18574" } ], "curies": [ { "name": "wp", "href": "https://api.w.org/{rel}", "templated": true } ] } } here is the Screenshot of website and here is the Fragment where i am getting all the articles as a plan text(without stying). import android.annotation.SuppressLint import android.os.Bundle import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import androidx.fragment.app.Fragment import androidx.lifecycle.ViewModelProvider import com.tohed.islampro.databinding.FragmentPostDetailsBinding import com.tohed.islampro.viewModel.PostViewModel class PostDetailsFragment : Fragment() { private var postId: Long = 0 private lateinit var binding: FragmentPostDetailsBinding private lateinit var postViewModel: PostViewModel override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) arguments?.let { postId = it.getLong("postId", 0) } } override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { binding = FragmentPostDetailsBinding.inflate(inflater, container, false) return binding.root } @SuppressLint("SetJavaScriptEnabled") override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) // Initialize ViewModel postViewModel = ViewModelProvider(requireActivity()).get(PostViewModel::class.java) binding.contentWebView.settings.javaScriptEnabled = true binding.contentWebView.settings.defaultTextEncodingName = "utf-8" // Set encoding for Urdu text // Observe post details LiveData postViewModel.postDetailsLiveData.observe(viewLifecycleOwner) { postDetails -> // Update UI with post details (e.g., title, content) binding.progressBar.visibility = View.GONE postDetails?.let { post -> binding.titleTextView.text = postDetails.title.rendered binding.contentWebView.loadDataWithBaseURL( null, wrapHtmlInCss(postDetails.content.rendered), "text/html; charset=utf-8", "UTF-8", null ) } } fetchPostDetails(postId) } private fun fetchPostDetails(postId: Long) { binding.progressBar.visibility = View.VISIBLE postViewModel.fetchPostDetails(postId) } private fun wrapHtmlInCss(htmlContent: String): String { val cssStyle = "<style>body { direction: rtl; text-align: right; }</style>" return "$cssStyle$htmlContent" } }

Comment (0)

You’ll be in good company