السلام عليكم
لدي استفسار انا استخدم احد خطوط جوجل في موقع للقرآن، ارغب بتعديل الخط بحيث يكون الارقام تظهر بلون آخر عن النص... اي لون احدده انا تظهر الارقام بهذا اللون... هل يتم هذا عن طريق كود يضاف الى html او بملف الخطوط الخاص بجوجل؟
علماً بان جميع السورة تكون نص واحد مع الارقام والحروف
أنت ذكرت أن نص القرآن كتلة واحدة، أي أن الأرقام ليست مضمنة داخل عنصر منفصل مثل span أو لا يوجد لها كلاس خاص.
لذلك أنت بحاجة إلى استخدام تعبير regex من أجل البحث عن الأرقام في النص بواسطة دالة replace في جافاسكريبت ثم استبدالها بعنصر مع كلاس محدد من أجل تنسيقه من خلال CSS.
وإليك مثال كامل:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="index.js"></script>
<title>Document</title>
<style>
p {
font: 18px/2.5 Verdana;
}
.number {
color: red;
}
</style>
</head>
<body>
<p id="quran">
الٓمٓ (1) ذَٰلِكَ ٱلۡكِتَٰبُ لَا رَيۡبَۛ فِيهِۛ هُدٗى لِّلۡمُتَّقِينَ (2) ٱلَّذِينَ
يُؤۡمِنُونَ بِٱلۡغَيۡبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقۡنَٰهُمۡ يُنفِقُونَ (3)
وَٱلَّذِينَ يُؤۡمِنُونَ بِمَآ أُنزِلَ إِلَيۡكَ وَمَآ أُنزِلَ مِن قَبۡلِكَ وَبِٱلۡأٓخِرَةِ
هُمۡ يُوقِنُونَ (4) أُوْلَٰٓئِكَ عَلَىٰ هُدٗى مِّن رَّبِّهِمۡۖ وَأُوْلَٰٓئِكَ هُمُ
ٱلۡمُفۡلِحُونَ (5) إِنَّ ٱلَّذِينَ كَفَرُواْ سَوَآءٌ عَلَيۡهِمۡ ءَأَنذَرۡتَهُمۡ أَمۡ لَمۡ
تُنذِرۡهُمۡ لَا يُؤۡمِنُونَ (6) خَتَمَ ٱللَّهُ عَلَىٰ قُلُوبِهِمۡ وَعَلَىٰ سَمۡعِهِمۡۖ
وَعَلَىٰٓ أَبۡصَٰرِهِمۡ غِشَٰوَةٞۖ وَلَهُمۡ عَذَابٌ عَظِيمٞ (7) وَمِنَ ٱلنَّاسِ مَن يَقُولُ
ءَامَنَّا بِٱللَّهِ وَبِٱلۡيَوۡمِ ٱلۡأٓخِرِ وَمَا هُم بِمُؤۡمِنِينَ (8) يُخَٰدِعُونَ ٱللَّهَ
وَٱلَّذِينَ ءَامَنُواْ وَمَا يَخۡدَعُونَ إِلَّآ أَنفُسَهُمۡ وَمَا يَشۡعُرُونَ (9) فِي
قُلُوبِهِم مَّرَضٞ فَزَادَهُمُ ٱللَّهُ مَرَضٗاۖ وَلَهُمۡ عَذَابٌ أَلِيمُۢ بِمَا كَانُواْ
يَكۡذِبُونَ (10) وَإِذَا قِيلَ لَهُمۡ لَا تُفۡسِدُواْ فِي ٱلۡأَرۡضِ قَالُوٓاْ إِنَّمَا نَحۡنُ
مُصۡلِحُونَ (11) أَلَآ إِنَّهُمۡ هُمُ ٱلۡمُفۡسِدُونَ وَلَٰكِن لَّا يَشۡعُرُونَ (12) وَإِذَا
قِيلَ لَهُمۡ ءَامِنُواْ كَمَآ ءَامَنَ ٱلنَّاسُ قَالُوٓاْ أَنُؤۡمِنُ كَمَآ ءَامَنَ
ٱلسُّفَهَآءُۗ أَلَآ إِنَّهُمۡ هُمُ ٱلسُّفَهَآءُ وَلَٰكِن لَّا يَعۡلَمُونَ (13) وَإِذَا
لَقُواْ ٱلَّذِينَ ءَامَنُواْ قَالُوٓاْ ءَامَنَّا وَإِذَا خَلَوۡاْ إِلَىٰ شَيَٰطِينِهِمۡ
قَالُوٓاْ إِنَّا مَعَكُمۡ إِنَّمَا نَحۡنُ مُسۡتَهۡزِءُونَ (14) ٱللَّهُ يَسۡتَهۡزِئُ بِهِمۡ
وَيَمُدُّهُمۡ فِي طُغۡيَٰنِهِمۡ يَعۡمَهُونَ (15) أُوْلَٰٓئِكَ ٱلَّذِينَ ٱشۡتَرَوُاْ
ٱلضَّلَٰلَةَ بِٱلۡهُدَىٰ فَمَا رَبِحَت تِّجَٰرَتُهُمۡ وَمَا كَانُواْ مُهۡتَدِينَ (16)
مَثَلُهُمۡ كَمَثَلِ ٱلَّذِي ٱسۡتَوۡقَدَ نَارٗا فَلَمَّآ أَضَآءَتۡ مَا حَوۡلَهُۥ ذَهَبَ
ٱللَّهُ بِنُورِهِمۡ وَتَرَكَهُمۡ فِي ظُلُمَٰتٖ لَّا يُبۡصِرُونَ (17) صُمُّۢ بُكۡمٌ عُمۡيٞ
فَهُمۡ لَا يَرۡجِعُونَ
</p>
<script>
const paragraph = document.getElementById('quran');
const text = paragraph.textContent;
const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
paragraph.innerHTML = modifiedText;
</script>
</body>
</html>
والفكرة كلها في السطر التالي
const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
فمن خلال التعبير النمطي (\d+) يتم البحث عن تطابق مع أي رقم من 0 إلى 9، والأقواس () تشير إلى مجموعة التقاط، مما يعني أن أي تسلسل من رقم واحد أو أكثر يتطابق مع هذا النمط سيتم التقاطه.
ثم تحدث عملية الاستبدال للنص في المتغير text ويستبدل كل تطابق بكود HTML الذي كتبناه وهو عنصر span أي النص الذي يحتوي على الأرقام المتطابقة ثم تصبح محاطة بعنصر span وتحمل الكلاس "number".
ومعنى $1 هو الإشارة إلى المجموعة الملتقطة الأولى في التعبير النمطي (الـ Regular Expression) المستخدم في العملية.
في التعبير العادي، يمكنك وضع أقواس ( ) لتحيين مجموعات التقاط. عندما تجد تطابقاً للنمط داخل النص الذي تقوم بالبحث فيه، يتم التقاط هذا التطابق وتذكيره في مجموعات التقاط. الرقم 1 يُستخدم للإشارة إلى المجموعة الملتقطة الأولى، بمعنى استبدال أول تطابق مباشرًة وإحاطته بعنصر span.
على سبيل المثال انا في هذا الوقت استعمل، لكن هذا مرهق لكل اية يجب اضافة هذا الكود... حسب الكود الي طرحته لا يوجد سطر لتعديل لون الخط " الرقم"
<span style=color:#069f25>﴿1﴾</span>
ليس المطلوب استخدام الكود لكل آية، بل ما تحتاج هو استخدام الـ id الخاص بالعنصر الذي يحتوي على السورة كاملة، وفي حال لديك عدّة عناصر تحتوي على السورة، فعليك استخدام كلاس واحد لجميع العناصر بدلاً من الـ id، وتعديل ذلك في أكواد HTML, CSS, JS
وأنت بحاجة تعلم أساسيات HTML على الأقل:
بالتأكيد يمكنك ذلك من خلال الطريقة التالية:
/* تغيير لون الأرقام إلى اللون الأزرق (blue) */
.your-text-class {
color: blue;
}
بعدها تقوم بتطبيقها على الأرقام
<p class="your-text-class">هنا النص مع الأرقام</p>
لا يمكن ذلك بصورة مباشرة، ولكن يمكنك القيام ببعض المحايلة لتحقيق ذلك.
مثال عملي:
// جلب حاوية النصوص المستهدفة
const paragraph = document.getElementById('myParagraph');
// تحديد المحتوى النصي داخلها
const text = paragraph.textContent;
// span استبدل كل محارف الأعداد بعنصر
const modifiedText = text.replace(/(\d+)/g, '<span class="number">$1</span>');
// قم بإعطاء الحاوية المحتوى الجديد
paragraph.innerHTML = modifiedText;
ثم لنقم بتطبيق أي تنسيقات على عنصر span بالكلاس number:
.number {
color: red;
}
التعليقات