Code HTML des côtés de modèle

Que cette page ne vous décourage pas ! La création d'un paquet créera des valeurs par défaut pour cela, que vous pouvez utiliser telles quelles pour vos cartes. Ceci est seulement pour les personnes voulant plus de personnalisation pour leurs cartes.

L'éditeur HTML vous permet de personnaliser vos cartes sans beaucoup de limitations. Couleurs, taille de police, arrière-plan, images, tableaux, styles CSS rendront vos cartes plus faciles à utiliser. Si vous ne connaissez pas HTML ou CSS, consultez des tutoriels en ligne, comme W3Schools.

Voir le bas de la page pour une liste des HTML/CSS autorisés.

Syntaxe de base

Le code dans le modèle est inclus dans une balise div parent. Le style de cette div est par défaut style="display:flex;flex-direction:column" mais cela peut être supprimé via une case à cocher, selon vos exigences pour votre carte.
L'un de ces deux choix est nécessaire si vous voulez utiliser style="flex:1" dans votre première balise entourante, par exemple pour une couleur d'arrière-plan unifiée, ou une carte complète drawable.

Le point d'interrogation précédant le nom du champ n'est utilisé que côté question. Veuillez lire la Syntaxe Moustache pour une meilleure compréhension.

Le côté question le plus simple

{{?field_question}}

et côté réponse

{{field_answer}}

est en fait suffisant pour que votre carte avant soit affichée avec la valeur de "field_question" dans votre entrée, et votre réponse pour juste montrer la valeur de "field_answer", mais ils resteront collés en haut à droite de votre carte. Pas très joli.

<div style="padding:10px">{{?field_question}}</div>

<div style="padding:10px">{{field_answer}}</div>

ajoutera un espace de 10px autour de votre carte.

<div style="padding:10px;text-align:center">{{?field_question}}</div>

<div style="padding:10px;text-align:center">{{field_answer}}</div>

ajoutera l'espace précédent, et les valeurs affichées seront centrées.

Changez le côté réponse en

<div style="padding:10px;text-align:center">{{field_question}}
<hr>
{{field_answer}}</div>

et la carte de réponse montrera à la fois le texte de la question et la réponse, séparés par une ligne (<hr>).

HTML/CSS autorisés

Pour des raisons de sécurité, nous ne pouvons pas permettre toute la gamme de code HTML dans les modèles. Cela empêche les popups, les attaques cross-site, etc.

Liste des balises HTML autorisées

Éléments de structure de document et de regroupement	div, figure, figcaption, hr, details, summary
Éléments de formatage de base et de texte	abbr, address, b, bdi, bdo, cite, code, del, dfn, em, i, ins, kbd, mark, p, pre, q, rp, rt, ruby, s, samp, small, span, strong, sub, sup, u, var, wbr
Éléments de tableau	table, tbody, tr, td, thead, th, tfoot, caption, colgroup, col
Éléments de liste	ul, li, ol, dl, dt, dd
Éléments à balise unique	br
Éléments KooeeZ (balise HTML personnalisée, ou non HTML)	img, audio, blank, tex

Liste des attributs HTML autorisés

Attributs HTML	style, class, height, width, src, href, cite, dir, lang, colspan, rowspan
Attributs KooeeZ	drawable, blank-order, blank-question, blank-answer, blank-keep-enter, img-click-reload, img-dark-invert, tex-expression, tex-display, tex-leqno

Liste des styles autorisés

Positionnement	left, right, top, bottom, display, direction
Mise en page Flexbox	flex-direction, flex-grow, flex-shrink, flex-basis, row-gap, column-gap, gap
Modèle de boîte	box-sizing, padding, padding-top, padding-bottom, padding-left, padding-right, margin, margin-top, margin-bottom, margin-left, margin-right, height, min-height, max-height, width, min-width, max-width
Bordures	border-top-width, border-top-style, border-top-color, border-bottom-width, border-bottom-style, border-bottom-color, border-left-width, border-left-style, border-left-color, border-right-width, border-right-style, border-right-color
Couleur et arrière-plan	color, background-color
Formatage de texte	text-align, vertical-align, font-family, font-size, line-height, white-space, overflow-wrap, word-break, hyphens, text-decoration, text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness

Classes autorisées

Général	fs-80	font-size: 0.80em;
	fs-83	font-size: 0.83em;
	fs-87	font-size: 0.87em;
	fs-115	font-size: 1.15em;
	fs-120	font-size: 1.20em;
	fs-125	font-size: 1.25em;
	fs-150	font-size: 1.50em;
	fs-200	font-size: 2em;
	lh-120	line-height: 1.2em;
	lh-130	line-height: 1.3em;
	lh-150	line-height: 1.5em;
	lh-180	line-height: 1.8em;
Accents de hauteur en japonais	jp-l	bas
	jp-h	haut
	jp-lt	bas et le suivant sera haut
	jp-ht	haut et le suivant sera bas
	jp-l2	bas (tirets)
	jp-h2	haut (tirets)
	jp-lt2	bas et le suivant sera haut (tirets)
	jp-ht2	haut et le suivant sera bas (tirets)