Стилизация и HTML

Стилизация карточек

Вы можете посмотреть видео о стилизации карточек на YouTube. На видео показан интерфейс Anki 2.0, но концепции в основном те же.

В раздел стилей экрана Карточки можно попасть, нажав переключатель "Таблица стилей" рядом с "Шаблон оборота". В этом разделе вы можете изменить цвет фона карточки, шрифт по умолчанию, выравнивание текста и так далее.

Доступные вам стандартные параметры:

font-family
Название шрифта для использования на карточке. Если в названии шрифта есть пробелы, например "MS Unicode", то необходимо заключить название шрифта в двойные кавычки: font-family: "MS Unicode";. Также можно использовать несколько шрифтов на одной карточке; для получения информации об этом см. ниже.

font-size
Размер шрифта в пикселях. При изменении не забудьте оставить px в конце.

text-align
Выравнивание текста: по центру (center), слева (left) или справа (right).

color
Цвет текста. Подойдут простые названия цветов, такие как "blue", "lightyellow" и т.д., или вы можете использовать HTML-коды цветов для выбора произвольных цветов. Дополнительную информацию см. на этой странице.

background-color
Цвет фона карточки.

В раздел стилей можно поместить любой CSS — продвинутые пользователи могут, например, добавить фоновое изображение или градиент. Если вы хотите добиться какого-то конкретного форматирования, поищите в интернете информацию о том, как это сделать в CSS, так как доступно огромное количество документации.

Стили являются общими для всех карточек, что означает, что когда вы вносите изменение, оно повлияет на все карточки для этого типа записи. Однако также можно указать стили для конкретной карточки. В следующем примере будет использоваться желтый фон для всех карточек, кроме первой:

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

Изменение размера изображений

По умолчанию Anki уменьшает изображения, чтобы они помещались на экране. Вы можете изменить это, добавив следующее в нижнюю часть вашего раздела стилей (за пределами стандартного .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 {
  ...;
}

Вы можете интерактивно изучать стилизацию карточек с помощью Chrome:

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

Anki 2.1.50+ поддерживает изменение размера изображений непосредственно в редакторе.

Стилизация полей

Стили по умолчанию применяются ко всей карточке. Вы также можете настроить для определенных полей или части карточки другой шрифт, цвет и так далее. Это особенно важно при изучении иностранных языков, так как Anki иногда не может правильно отображать символы, если не выбран подходящий шрифт.

Допустим, у вас есть поле “Expression” , и вы хотите задать для него тайский шрифт macOS "Ayuthaya". Представьте, что ваш шаблон уже выглядит так:

What is {{Expression}}?

{{Notes}}

Что нам нужно сделать, так это обернуть текст, который мы хотим стилизовать, в некоторый HTML. Мы поместим следующее перед текстом:

<div class=mystyle1>

А следующее — после него:

</div>

Обернув текст таким образом, мы указываем Anki стилизовать обернутый текст с помощью пользовательского стиля с именем “mystyle1”, который мы создадим позже.

Таким образом, если бы мы хотели, чтобы вся фраза “What is …​?” использовала тайский шрифт, мы бы использовали:

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

{{Notes}}

А если бы мы хотели, чтобы только само поле "Expression" использовало тайский шрифт, мы бы использовали:

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

{{Notes}}

После того как мы отредактировали шаблон, нам нужно перейти в раздел "Таблица стилей". Перед редактированием он должен выглядеть примерно так:

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

Также можно встраивать пользовательские шрифты в вашу колоду, чтобы их не нужно было устанавливать на ваш компьютер или мобильное устройство. Дополнительную информацию см. в разделе установка шрифтов.

Кнопки повтора аудио

Когда на ваших карточках есть аудио или озвучивание текста (TTS), Anki показывает кнопки, на которые можно нажать для повтора аудио.

Если вы предпочитаете не видеть эти кнопки, вы можете скрыть их на экране настроек.

Вы можете настроить их внешний вид в стилях вашей карточки; например, чтобы сделать их меньше и цветными, вы можете использовать следующий код:

.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, что означает, что все возможности верстки, используемые на веб-страницах, могут быть применены и к вашим карточкам. Поддерживаются такие вещи, как таблицы, списки, изображения, ссылки на внешние страницы и так далее. С помощью таблиц, например, вы можете изменить расположение так, чтобы передняя и задняя стороны карточки отображались слева и справа, а не сверху и снизу.

Освещение всех возможностей HTML выходит за рамки этого руководства, но в интернете есть множество хороших вводных руководств по HTML, если вы хотите узнать больше.

Вид в окне "Просмотр"

Если ваши шаблоны карточек сложны, чтение колонок вопроса и ответа (называемых "Передняя сторона" и "Задняя сторона") в таблице карточек может быть затруднено. Опция «Вид в окне "Просмотр"» позволяет определить пользовательский шаблон, который будет использоваться только в Просмотре, так что вы можете включить только важные поля и изменить порядок по желанию. Синтаксис такой же, как в стандартных шаблонах карточек.

При использовании этой опции, если текст в колонке вопроса повторяется в начале колонки ответа, Anki отобразит текст только в колонке вопроса. Например, если текст в колонке вопроса — "Люди в Ладакхе говорят на", а ответ — "Люди в Ладакхе говорят на ладакхи", в колонке ответа отобразится только "ладакхи", опуская остальное.

CSS для конкретных платформ

Anki определяет несколько специальных 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>

Вы также можете использовать свойства, такие как .gecko, .opera и .ie, для выбора конкретных браузеров при использовании AnkiWeb. Полный список опций см. на http://rafael.adm.br/css_browser_selector/.

Установка шрифтов

Вы можете устанавливать шрифты непосредственно в Anki. Это полезно, если вы используете Anki на рабочем или школьном компьютере, где у вас нет прав на установку новых шрифтов, или если вы используете Anki на мобильном устройстве.

Anki поддерживает наиболее широко используемые форматы шрифтов, такие как TrueType (.ttf), OpenType (.otf), Web Open Font Format (.woff) и другие.

Добавление шрифта в папку медиафайлов

После того как вы загрузили поддерживаемый шрифт, например "Arial.ttf", вы должны добавить его в папку медиафайлов.

  1. Переименуйте файл, добавив подчеркивание в начале, чтобы он стал похож на "_arial.ttf". Добавление подчеркивания укажет Anki, что этот файл будет использоваться в шаблоне и не должен удаляться при проверке неиспользуемых медиафайлов.

  2. В файловом менеджере вашего компьютера перейдите в папку с данными приложения Anki (подробнее см. расположение файлов), а затем в папку вашего профиля (например, "User 1").

  3. Внутри папки вы должны увидеть папку с названием "collection.media". Перетащите переименованный файл в эту папку.

Обновление шаблона для использования этого шрифта

После того как шрифт добавлен в папку медиафайлов, вам нужно обновить шаблон.

  1. Нажмите Добавить в верхней части главного экрана, затем выберите тип записи, который хотите изменить, с помощью левой верхней кнопки.

  2. Нажмите Карточки.

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

Затемнение и прокрутка

По умолчанию Anki автоматически прокручивает к ответу. Он ищет HTML-элемент с id=answer и прокручивает к нему. Вы можете разместить id на другом элементе, чтобы настроить позицию прокрутки, или удалить id=answer, чтобы отключить прокрутку.

Сторона вопроса карточки по умолчанию появляется с эффектом затемнения. Если вы хотите настроить эту задержку, вы можете поместить следующее в начало шаблона передней стороны карточки:

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

100 (миллисекунд) — значение по умолчанию; установите 0, чтобы отключить затемнение.

JavaScript

Поскольку карточки Anki обрабатываются как веб-страницы, можно встроить немного JavaScript в ваши карточки через шаблон карточки. Для получения хорошего справочного материала прочитайте этот пост на форумах.

Поскольку JavaScript — это продвинутая функция, и может пойти многое не так, функциональность JavaScript предоставляется без какой-либо поддержки или гарантий. Мы не можем оказать помощь в написании JavaScript и не можем гарантировать, что любой написанный вами код будет продолжать работать без изменений в будущих обновлениях Anki. Если вы не готовы самостоятельно решать любые возникающие проблемы, пожалуйста, воздержитесь от использования JavaScript.

Каждый клиент Anki может по-разному реализовывать отображение карточек, поэтому вам нужно будет тестировать поведение на разных платформах. Некоторые клиенты реализованы путем поддержания долго работающей веб-страницы и динамического обновления ее частей по мере повторения карточек, поэтому ваш JavaScript должен будет обновлять разделы документа, используя такие вещи, как document.getElementById(), а не делать, например, document.write().

Такие функции, как window.alert, могут быть недоступны. Anki будет записывать ошибки JavaScript в терминал, поэтому вам нужно будет посмотреть консоль, чтобы увидеть их. Для отладки проблем с JavaScript вы можете использовать инспектор Chrome.