التنسيق و HTML

تنسيق البطاقات

بإمكانك مشاهدة فيديو عن تنسيق البطاقات في يوتيوب. يظهر الفيديو واجهة أنكي 2.0، لكن المفاهيم هي نفسها تقريبًا. يمكن الوصول إلى قسم التنسيق في نافذة البطاقات بالنقر على زر “التنسيق” المجاور لزر “القالب الخلفي”. تستطيع تغيير لون خلفية البطاقة، الخط الافتراضي، محاذاة النص، وما إلى ذلك من خلال هذا القسم. الخيارات الأساسية المتوفرة هي: font-family
اسم الخط الذي تريد استخدامه في البطاقة. إذا كان هناك فراغات في اسم الخط مثل “MS Unicode”، فعليك أن تحيط الاسم بأقواس مثل المستخدمة في هذه الجملة. من الممكن أيضًا استخدام عدة خطوط في البطاقة نفسها؛ تابع القراءة لمزيد من المعلومات. font-size
حجم الخط بوحدة البيكسل. لا تنس إبقاء “px” في آخر الحجم عند تغييره. text-align
محاذاة النص إلى الوسط، أو اليسار، أو اليمين. color
لون النص. ستعمل أسماء ألوان بسيطة مثل ‘blue’، أو ‘lightyellow’، وما إلى ذلك. كما بإمكانك استخدام رموز ألوان HTML لاختيار ألوان اعتباطية. انظر هذا الموقع لمزيد من المعلومات. background-color
لون خلفية البطاقة. يمكن وضع أي CSS في قسم التنسيق - قد يرغب المستخدمون المتقدمون في فعل أشياء مثل إضافة صورة خلفية أو خلفية بألوان متدرجة مثلًا. إذا كنت تتساءل كيف تحصل على صيغة ما، ابحث في الويب عن معلومات حول كيفية فعل ذلك في CSS، حيث هناك كمية هائلة من الوثائق. تشترك كل البطاقات بمعلومات التنسيق، ما يعني أنه عندما تجري تعديلًا فإنه سيؤثر على كل بطاقات نوع الملحوظة ذاك. لكن من الممكن أيضًا تطبيق تنسيقات خاصة ببطاقة محددة. يستخدم المثال التالي خلفية صفراء في كل البطاقات ما عدا الأولى:

.card {
    background-color: yellow;
}
.card1 {
    background-color: blue;
}

تغيير حجم الصور

يقلص أنكي الصور لتلائم الشاشة بشكل افتراضي. تستطيع تغيير هذا بإضافة التالي إلى أسفل قسم التنسيق (خارج قسم .card { ... } الافتراضي):

img {
    max-width: none;
    max-height: none;
}

أحيانًا يواجه أنكيدرويد مشاكل عند تغيير جحم الصور لتلائم الشاشة. ضبط أبعاد الصورة القصوى باستخدام CSS يجب أن يصلح هذا، لكن ليس في أنكيدرويد 2.9 على ما يبدو. يمكن إصلاح هذا بإضافة !important لكل أمر تنسيق كالتالي:

img {
    max-width: 300px !important;
    max-height: 300px !important;
}

إذا أدرت تغيير تنسيق الصور ووجدت أن النجمة التي تظهر على البطاقات المعلّمة تأثرت بذلك (أصبحت كبيرة جدًا مثلًا)، فبإمكانك تنسيقها باستخدام التالي:

img#star {
  ...;
}

تستطيع تصفح تنسيق البطاقات بشكل تفاعلي باستخدام متصفح كروم: webview changes

تنسيق الحقول

ينطبق التنسيق الافتراضي على البطاقة كاملة. كما تستطيع جعل بعض الحقول أو قسم من البطاقة يستخدم خطًا، أو لونًا مختلفًا، وما إلى ذلك. هذا مهم خصيصًا حين دراسة اللغات الأجنبية، حيث لا يقدر أنكي أحيانًا على إظهار الحروف بشكل صحيح إلا إذا اُختير الخط المناسب. لنقل أن لديك حقلًا باسم «عبارة»، وتريد عرضه بخط أو إس إكس التايلندي “Ayuthaya”. لنفرض أن قالبك يحوي التالي:

    ما {{عبارة}}؟

    {{ملاحظات}}

علينا إحاطة النص الذي نريد تنسيقه ببعض الHTML. سنضع التالي قبل النص:

    <div class=mystyle1>

والتالي بعده:

    </div>

بإحاطة النص هكذا، فإننا نخبر أنكي بتنسيق النص المحاط بتنسيق مخصص سننشئه لاحقًا يدعى “mystyle1”، إذا أدرنا أن تستخدم عبارة «ما …؟» كاملة الخط التايلندي، فسنستخدم:

    <div class=mystyle1>ما {{عبارة}}؟</div>

    {{ملاحظات}}

وإذا أدرنا استخدام الخط لحقل العبارة فقط، فسنستخدم:

    ما <div class=mystyle1>{{عبارة}}</div>؟

    {{ملاحظات}}

بعد تعديل القالب، علينا الانتقال إلى قسم التنسيق بين القوالب. يجب أن يبدو كالتالي قبل تعديله:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

أضف التنسيق الجديد إلى الأسفل كالتالي:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.mystyle1 {
    font-family: ayuthaya;
}

تستطيع تضمين أي تنسيق تريده. إذا أدرت تغيير حجم الخط أيضًا، فستعدل قسم mystyle1 ليبدو هكذا:

.mystyle1 {
    font-family: ayuthaya;
    font-size: 30px;
}

من الممكن أيضًا تضمين خطوط مخصصة مع رزمتك، لكي لا تحتاج إلى تنصيبها في حاسوبك أو هاتفك المحمول. انظر قسم تنصيب الخطوط لمزيد من المعلومات.

أزرار إعادة تشغيل الصوت

عندما يكون هناك تسجيل صوتي أو تحويل نص إلى كلام في بطاقاتك، سيظهر أنكي أزرارًا تستطيع الضغط عليها لإعادة تشغيل الصوت. بإمكانك إخفاء هذه الأزرار من خلال نافذة التفضيلات إذا كنت تفضل عدم رؤيتها. تستطيع تخصيص مظهر هذه الأزرار. تستطيع استخدام التالي لجعلها أصغر وبألوان مختلفة مثلًا:

.replay-button svg {
    width: 20px;
    height: 20px;
}
.replay-button svg circle {
    fill: blue;
}
.replay-button svg path {
    stroke: white;
    fill: green;
}

اتجاه النص

إذا كنت تستخدم لغة تكتب من اليمين إلى اليسار، مثل العربية أو العبرية، تستطيع إضافة خاصية direction لقسم .card لكي تعرض البطاقات بشكل صحيح عند المراجعة:

.card {
    direction: rtl;
}

سيغير هذا اتجاه كامل البطاقة. تستطيع تغيير اتجاه حقول معينة فقط بإحاطتها بكود HTML كالتالي:

    <div dir="rtl">{{أمام}}</div>

لتغيير اتجاه الحقول في المحرر، انظر قسم التحرير.

HTML آخر

يمكن أن تحوي قوالبك على أي HTML، ما يعني أنه يمكن استخدام كل التخطيطات الممكنة في صفحات الويب في بطاقاتك. أشياء مثل الجداول، والقوائم، والصور، والروابط إلى صفحات خارجية وما إلى ذلك - كلها مدعومة. باستخدام الجداول مثلًا، تستطيع تغيير التخطيط بحيث يظهر الجانب الأمامي والخلفي في بطاقة على اليسار واليمين بدلًا من الأعلى والأسفل. إن تغطية كل ميزات HTML خارج نطاق هذا الدليل، لكن هناك كثير من الأدلة التعريفية الجيدة حول HTML متوفرة على الويب إذا أردت تعلم المزيد.

مظهر المتصفح

إذا كانت قوالب بطاقاتك معقدةـ، فقد يكون من الصعب قراءة عمودي السؤال والجواب (التي تدعى «أمام» و «خلف») في قائمة البطاقات. يسمح لك خيار «مظهر المتصفح» بتعريف قالب مخصص ليُستخدم في المتصفح فقط، حيث يمكنك تضمين الحقول المهمة فقط وتغيير الترتيب إذا أردت. الصياغة هي مثل صياغة قوالب البطاقات العادية.

CSS خاص بمنصة معينة

يعرّف أنكي عدة فئات CSS خاصة تسمح لك بتعريف تنسيقات مختلفة لمنصات مختلفة. يظهر المثال في الأسفل كيفية تغيير الخط اعتمادًا على المنصة التي تراجع منها:

.win .jp {
    font-family: "MS Mincho";
}
.mac .jp {
    font-family: "Hiragino Mincho Pro";
}
.linux .jp {
    font-family: "Kochi Mincho";
}
.mobile .jp {
    font-family: "Hiragino Mincho ProN";
}

وفي القالب:

<div class="jp">{{Field}}</div>

تستطيع استخدام ‘.iphone’ و ‘.ipad’ لأجهزة آي أو إس المختلفة. تستطيع استخدام خصائص مثل .gecko و .opera و .ie لتحديد متصفحات محددة عند استخدام أنكي ويب. انظر http://rafael.adm.br/css_browser_selector/ لقائمة الخيارات كاملة.

تنصيب خطوط

إذا كنت تستخدم أنكي على حاسوب العمل أو المدرسة حيث ليس لديك إذن بتنصيب خطوط جديدة، أو إذا كنت تستخدم أنكي على هاتف محمول، فمن الممكن إضافة خطوط إلى أنكي مباشرة. يجب أن يكون الخط الذي تريد إضافته بصيغة TrueType. لخطوط TrueType أسماء تنتهي بلاحقة .ttf مثل “Arial.ttf”. بعد أن تحدد موقع خط TrueType، تحتاج إلى إضافته إلى مجلد الوسائط:

أضف شرطة تحتية (_) إلى اسم الملف ليصبح مثل “_arial.ttf”. إضافة شرطة تحتية تخبر أنكي أن هذا الملف سيُستخدم في قالب، ولا يجب حذفه عند فحص الوسائط غير المستخدمة.
في متصفح ملفات حاسوبك، اذهب إلى مجلد أنكي، ثم مجلد يدعى «مستخدم 1» (أو اسم ملفك الشخصي إذا أعدت تسميته أو أضفت ملفًا جديدًا).
داخل المجلد، يجب أن ترى مجلدًا باسم collection.media. انسخ ملف الخط إلى هذا المجلد.

علينا تحديث القالب بعد ذلك:

اضغط إضافة في أعلى النافذة الرئيسية، وحدد نوع الملحوظة الذي تريد تغييره من خلال الزر في أعلى اليسار.
اضغط بطاقات.
في قسم التنسيق، أضف النص التالي إلى الأسفل (بعد رمز ”}” الأخير)، مستبدلًا “_arial.ttf” باسم الملف الذي تريد نسخه إلى مجلد الوسائط:

@font-face {
    font-family: myfont;
    src: url("_arial.ttf");
}

غير جزء “arial” فقط، وليس “myfont”. بعد ذلك، تستطيع إما تغيير خط البطاقة كاملة، أو حقول فردية. لتغيير خط البطاقة كاملة، ابحث عن سطر font-family: في قسم .card وغير الخط إلى “myfont”. لتغيير خط حقول محددة فقط، انظر تعليمات تنسيق الحقول في الأعلى. تأكد أن أسماء الملفات تتطابق. إذا كان اسم الملف arial.TTF فكتابة arial.ttf لن تعمل.

الوضع الليلي

تستطيع تخصيص مظهر القوالب عندما يكون الوضع الليلي مفعلًا في نافذة التفضيلات. إذا أردت خلفية رمادية أفتح، قد تستخدم التالي:

.card.nightMode {
    background-color: #555;
}

إذا كان لديك تنسيق ‘myclass’، فسيظهر الكود التالي النص بلون أصفر عندما يكون الوضع الليلي مفعلًا:

.nightMode .myclass {
    color: yellow;
}

التلاشي والتنقل

سينقلك أنكي إلى قسم الجواب بشكل افتراضي. إنه يبحث عن عنصر HTML بمعرف id=answer، وينتقل إليه. تستطيع وضع المعرّف في عنصر مختلف لتغيير موقع الانتقال، أو حذفه لإيقاف الانتقال. يتلاشى جانب السؤال ببطء بشكل افتراضي. إذا أدرت ضبط فترة التلاشي، تستطيع وضع التالي في أعلى القالب الأمامي:

<script>
    qFade = 100;
    if (typeof anki !== "undefined") anki.qFade = qFade;
</script>

100 (مللي ثانية) هي المدة الافتراضية؛ غيرها إلى 0 لإيقاف تأثير التلاشي.

جافا سكريبت

من الممكن تضمين بعض أكواد جافا سكريبت في البطاقات من خلال القالب حيث إن بطاقات أنكي هي بمثابة صفحات ويب. انظر هذا المنشور في المنتديات لدليل تعليمي جيد. لأن جافا سكريبت ميزة متقدمة وهناك عدة أشياء قد تسبب المشاكل، فإن ميزة جافا سكريبت موفرة بدون أي دعم أو ضمانة. لا نستطيع توفير أي مساعدة لكتابة جافا سكريبت، ولا ضمان استمرارية عمل أي كود كتبته بدون تغيير في إصدارات أنكي المستقبلية. إذا لم تكن لديك القدرة على إصلاح أي مشاكل قد تواجهك بنفسك، فالرجاء تجنب استخدام جافا سكريبت. قد يطبق كل برنامج لأنكي عرض البطاقات بشكل مختلف، لذلك فستحتاج إلى اختبار السلوك في عدة منصات. تعمل بعض البرامج من خلال إبقاء صفحة ويب تعمل لمدة طويلة وتحديث أجزاء منها بشكل ديناميكي عند مراجعة البطاقات، لذلك يحتاج كود جافا سكريبت الخاص بك إلى تحديث أقسام من الوثيقة باستخدام أشياء مثل document.getElementById() بدلًا من أشياء مثل document.write(). لا تتوفر دوال مثل window.alert أيضًا. سيكتب أنكي أخطاء جافا سكريبت في الطرفية، لذلك إذا كنت تعمل على حاسوب ماك أو ويندوز، فستحتاج إلى التقاط الأخطاء يدويًا وكتابتها إلى الوثيقة لرؤيتها. لا يتوفر مشخص أخطاء، لذلك عليك تجزيء أكوادك حتى تكتشف الأجزاء التي تسبب مشاكل.

​تنسيق البطاقات

​تغيير حجم الصور

​تنسيق الحقول

​أزرار إعادة تشغيل الصوت

​اتجاه النص

​HTML آخر

​مظهر المتصفح

​CSS خاص بمنصة معينة

​تنصيب خطوط

​الوضع الليلي

​التلاشي والتنقل

​جافا سكريبت