استایل و HTML

استایل کارت

می‌توانید ویدیویی درباره استایل‌دادن به کارت‌ها را در یوتیوب ببینید. ویدیو رابط آنکی 2.0 را نشان می‌دهد، اما مفاهیم عمدتاً همان‌ها هستند.

به بخش استایل صفحه Cards می‌توان با کلیک روی دکمه "Styling" کنار دکمه "Back Template" دسترسی پیدا کرد. در آن بخش می‌توانید رنگ پس‌زمینه کارت، قلم پیش‌فرض، تراز متن و غیره را تغییر دهید.

گزینه‌های استاندارد در دسترس شما این‌ها هستند:

font-family
نام قلمی که روی کارت استفاده می‌شود. اگر قلم‌تان فاصله دارد، مانند "MS Unicode"، باید نام قلم را در گیومه دوتایی بگذارید؛ مانند 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;
}

AnkiDroid گاهی در مقیاس‌کردن تصاویر برای جا شدن در صفحه مشکل دارد. تنظیم ابعاد بیشینه تصویر با css باید این را درست کند، اما از AnkiDroid 2.9 به بعد به‌نظر نادیده گرفته می‌شود. راه‌حل، الصاق !important به هر دستور استایل است؛ مثلاً:

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

اگر سعی کردید استایل تصاویر را تغییر دهید و دیدید ستاره‌ای که روی کارت‌های نشان‌گذاری‌شده ظاهر می‌شود تحت تأثیر قرار می‌گیرد (مثلاً خیلی بزرگ می‌شود)، می‌توانید با این کار آن را هدف بگیرید:

img#star {
  ...;
}

می‌توانید با کروم، استایل کارت‌ها را به‌صورت تعاملی بررسی کنید:

https://addon-docs.ankiweb.net/porting2.0.html#webview-changes

آنکی 2.1.50+ تغییر اندازه تصویر را در خود ویرایشگر به‌طور بومی پشتیبانی می‌کند.

استایل فیلد

استایل پیش‌فرض بر کل کارت اعمال می‌شود. همچنین می‌توانید فیلدها یا بخش‌های معینی از کارت را وادار کنید از قلم، رنگ و غیره متفاوتی استفاده کنند. این به‌ویژه هنگام یادگیری زبان‌های خارجی مهم است، چون آنکی گاهی بدون انتخاب قلم مناسب نمی‌تواند نویسه‌ها را درست نمایش دهد.

فرض کنید فیلد "Expression" دارید و می‌خواهید قلم تایلندیِ macOS با نام "Ayuthaya" را به آن بدهید. تصور کنید قالب‌تان هم‌اکنون این است:

What is {{Expression}}?

{{Notes}}

کاری که باید بکنیم پیچیدن متنی که می‌خواهیم استایل بگیرد در HTML است. این را پیش از متن می‌گذاریم:

<div class=mystyle1>

و این را پس از آن:

</div>

با پیچیدن متن مانند بالا، به آنکی می‌گوییم متن پیچیده‌شده را با استایلی سفارشی به نام "mystyle1" استایل بدهد که بعداً می‌سازیم.

پس اگر بخواهیم کل عبارت «What is …​?» از قلم تایلندی استفاده کند، از این استفاده می‌کنیم:

<div class=mystyle1>What is {{Expression}}?</div>

{{Notes}}

و اگر فقط خود فیلد عبارت از قلم تایلندی استفاده کند، از این:

What is <div class=mystyle1>{{Expression}}</div>?

{{Notes}}

پس از ویرایش قالب، اکنون باید به بخش Styling میان قالب‌ها برویم. پیش از ویرایش، باید چیزی شبیه این باشد:

.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;
}

جهت متن

اگر از زبانی استفاده می‌کنید که راست‌به‌چپ نوشته می‌شود — مانند عربی یا عبری — می‌توانید خاصیت CSS direction را برای نمایش درست هنگام مرور به بخش .card بیفزایید:

.card {
  direction: rtl;
}

این جهت کل کارت را تغییر می‌دهد. می‌توانید جهت فقط فیلدهای معین را با پیچیدن ارجاع‌هایشان در HTML تغییر دهید:

<div dir="rtl">{{Front}}</div>

برای تغییر جهت فیلدها در ویرایشگر، بخش ویرایش را ببینید.

نمایش قطعه‌های کد

اگر می‌خواهید در کارت‌های آنکی‌تان کد بگنجانید، می‌توانید از برچسب‌های HTML برای قالب‌بندی متن به‌عنوان کد استفاده کنید. برای آن، باید نمای HTML را باز کنید.

کد درون‌خطی

متن‌تان را با برچسب <code> بپیچید:

<code>console.log("Hello World!");</code>

بلوک‌های کد

برای کد چندخطی از <pre><code> استفاده کنید:

<pre><code>
function square(number) {
  return number * number;
};
</code></pre>

HTML دیگر

قالب‌های شما می‌توانند HTML دلخواه در بر داشته باشند؛ یعنی همه امکانات چیدمانی که در صفحات وب اینترنت استفاده می‌شوند، روی کارت‌هایتان هم قابل استفاده‌اند. چیزهایی مانند جدول‌ها، فهرست‌ها، تصاویر، پیوندها به صفحات بیرونی و غیره همگی پشتیبانی می‌شوند. مثلاً با جدول‌ها می‌توانید چیدمان را طوری تغییر دهید که روی و پشت کارت به‌جای بالا و پایین، در چپ و راست ظاهر شوند.

پوشش همه امکانات HTML خارج از حیطه این راهنماست، اما اگر دوست دارید بیشتر بیاموزید، راهنماهای مقدماتی خوبی برای HTML در وب موجود است.

ظاهر در مرورگر

اگر قالب‌های کارت‌تان پیچیده باشند، ممکن است خواندن ستون‌های پرسش و پاسخ (به نام "Front" و "Back") در فهرست کارت‌ها دشوار باشد. گزینه "browser appearance" به شما اجازه می‌دهد قالبی سفارشی تعریف کنید که فقط در مرورگر استفاده شود؛ پس می‌توانید فقط فیلدهای مهم را بیاورید و در صورت تمایل ترتیب را عوض کنید. نحو همان نحو قالب‌های کارت استاندارد است.

هنگام استفاده از این گزینه، اگر متن ستون پرسش در ابتدای ستون پاسخ تکرار شده باشد، آنکی متن را فقط در ستون پرسش نمایش می‌دهد. مثلاً اگر متن ستون پرسش "People in Ladakh speak" باشد و پاسخ "People in Ladakh speak Ladakhi"، ستون پاسخ فقط "Ladakhi" را نمایش می‌دهد و باقی را حذف می‌کند.

CSS مخصوص پلتفرم

آنکی چند کلاس CSS ویژه تعریف می‌کند که به شما اجازه می‌دهد برای پلتفرم‌های مختلف استایل متفاوتی تعریف کنید. مثال زیر نشان می‌دهد چگونه بسته به جایی که مرور می‌کنید، قلم را تغییر دهید:

/* Windows */
.win .example {
  font-family: "Example1";
}
/* macOS */
.mac .example {
  font-family: "Example2";
}
/* Linux desktops */
.linux:not(.android) .example {
  font-family: "Example3";
}
/* both Linux desktops, and Android devices */
.linux .example {
  font-family: "Example4";
}
/* both Android and iOS */
.mobile .example {
  font-family: "Example5";
}
/* iOS */
.iphone .example,
.ipad .example {
  font-family: "Example6";
}
/* Android */
.android .example {
  font-family: "Example7";
}

و در قالب:

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

همچنین می‌توانید هنگام استفاده از AnkiWeb از خاصیت‌هایی مانند .gecko، .opera و .ie برای انتخاب مرورگرهای مشخص استفاده کنید. برای فهرست کامل گزینه‌ها http://rafael.adm.br/css_browser_selector/ را ببینید.

نصب قلم‌ها

می‌توانید قلم‌ها را مستقیماً در آنکی نصب کنید. این سودمند است اگر آنکی را روی رایانه محل کار یا مدرسه‌ای استفاده می‌کنید که اجازه نصب قلم جدید ندارید، یا اگر آنکی را روی دستگاه موبایل استفاده می‌کنید.

آنکی از پرکاربردترین قالب‌های قلم پشتیبانی می‌کند؛ مانند TrueType (.ttf)، OpenType (.otf)، Web Open Font Format (.woff) و غیره.

افزودن قلم به پوشه رسانه

وقتی قلم پشتیبانی‌شده‌ای — مانند "Arial.ttf" — دانلود کردید، باید آن را به پوشه رسانه بیفزایید.

  1. نام پرونده را طوری تغییر دهید که خط تیره زیرین در ابتدایش بیاید؛ مانند "_arial.ttf". افزودن خط تیره زیرین به آنکی می‌گوید این پرونده روی قالبی استفاده می‌شود و هنگام بررسی رسانه‌های بلااستفاده نباید حذف شود.

  2. در مرورگر پرونده رایانه‌تان، به پوشه داده برنامه آنکی بروید (جزئیات در محل پرونده‌ها)، سپس به پوشه نمایه‌تان (مثلاً "User 1").

  3. درون پوشه، پوشه‌ای به نام collection.media باید ببینید. پرونده تغییرنام‌یافته را به آن پوشه بکشید.

به‌روزرسانی قالب برای استفاده از آن قلم

پس از افزوده‌شدن قلم به پوشه رسانه، باید قالب را به‌روزرسانی کنید.

  1. در بالای صفحه اصلی روی Add کلیک کنید، سپس با دکمه بالا-چپ نوع یادداشتی را که می‌خواهید تغییر دهید انتخاب کنید.

  2. روی Cards کلیک کنید.

  3. در بخش استایل، متن زیر را به پایین بیفزایید (پس از آخرین نویسه "}") و "_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 می‌گردد و به آن پیمایش می‌کند. می‌توانید id را روی عنصر دیگری بگذارید تا موقعیت پیمایش تنظیم شود، یا id=answer را حذف کنید تا پیمایش خاموش شود.

سمت پرسش کارت به‌طور پیش‌فرض با محو شدن ظاهر می‌شود. اگر می‌خواهید این تأخیر را تنظیم کنید، می‌توانید این را در بالای قالبِ روی کارت‌تان بگذارید:

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

۱۰۰ (میلی‌ثانیه) پیش‌فرض است؛ برای خاموش‌کردن محو شدن روی ۰ بگذارید.

جاوااسکریپت

چون کارت‌های آنکی مانند صفحات وب تلقی می‌شوند، ممکن است از طریق قالب کارت، جاوااسکریپتی روی کارت‌هایتان جاسازی کنید. برای مرجعی خوب، این نوشته را در انجمن‌ها بخوانید.

چون جاوااسکریپت قابلیتی پیشرفته است و بسیار چیز می‌تواند خراب شود، قابلیت جاوااسکریپت بدون هیچ پشتیبانی یا ضمانتی فراهم شده است. ما نمی‌توانیم هیچ کمکی برای نوشتن جاوااسکریپت ارائه کنیم و نمی‌توانیم تضمین کنیم کدی که نوشته‌اید بدون تغییر در به‌روزرسانی‌های آینده آنکی به کار خود ادامه دهد. اگر با روبه‌رو شدن و حل مشکلات به‌تنهایی راحت نیستید، لطفاً از استفاده از جاوااسکریپت بپرهیزید.

هر کلاینت آنکی ممکن است نمایش کارت را متفاوت پیاده کند؛ پس باید رفتار را میان پلتفرم‌ها آزمایش کنید. تعدادی از کلاینت‌ها با نگه‌داشتن صفحه وبی طولانی‌عمر و به‌روزرسانی پویا بخش‌هایی از آن هنگام مرور کارت‌ها پیاده شده‌اند؛ پس جاوااسکریپت شما باید بخش‌های سند را با چیزهایی مانند document.getElementById() به‌روزرسانی کند، نه اینکه کارهایی مانند document.write() انجام دهد.

عملکردهایی مانند window.alert ممکن است موجود نباشند. آنکی خطاهای جاوااسکریپت را در ترمینال می‌نویسد؛ پس برای دیدن آن‌ها باید کنسول را ببینید. برای اشکال‌زدایی جاوااسکریپت می‌توانید از بازرس کروم استفاده کنید.