Template sides' HTML code
Do not feel intimidated by this page. Pack creation will create default values for this, that you can use as such for your cards. This is only for people wanting more customization for their cards.
The HTML editor lets you customize your cards without much limitation. Colors, font size, background, images, tables, CSS styles will make your cards easier to use. If you do not know HTML or CSS, check online tutorials, like W3Schools.
See the bottom of the page for a list of allowed HTML/CSS.
Basic Syntax
The code in the template is included in a parent div tag. Style for this div is by default style="display:flex;flex-direction:column" but this can be removed through a checkbox, depending on your requirements for your card.
One of these two choices is necessary if you want to use style="flex:1" in your first surrounding tag, e.g. for a unified background color, or a full card drawable.
The question mark preceding the field name is used only on question side. Please read the Mustache Syntax for a better understanding.
The simplest question side
{{?field_question}}and answer side
{{field_answer}}is actually enough for your front card to be displayed with the value of "field_question" in your entry, and your answer to just show the value from "field_answer", but they will stick to the top right of your card. Not very nice.
<div style="padding:10px">{{?field_question}}</div>and
<div style="padding:10px">{{field_answer}}</div>will add a 10px space around your card.
<div style="padding:10px;text-align:center">{{?field_question}}</div>and
<div style="padding:10px;text-align:center">{{field_answer}}</div>will add the previous space, and the displayed values will be centered.
Change the answer side to
<div style="padding:10px;text-align:center">{{field_question}}
<hr>
{{field_answer}}</div>and the answer card will show both the question text and the answer, separated by a line (<hr>).
Allowed HTML/CSS
For security reasons, we cannot allow the full range of HTML code to be included in the templates. This prevents popups, cross-site attacks, etc.
List of allowed HTML tags
| Document Structure and Grouping Elements | div, figure, figcaption, hr, details, summary |
| Basic Formatting and Text Elements | 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 |
| Table Elements | table, tbody, tr, td, thead, th, tfoot, caption, colgroup, col |
| List Elements | ul, li, ol, dl, dt, dd |
| Single Tag Elements | br |
| KooeeZ Elements (customized HTML tag, or non HTML) | img, audio, blank, tex |
List of allowed HTML attributes
| HTML Attributes | style, class, height, width, src, href, cite, dir, lang, colspan, rowspan |
| KooeeZ Attributes | drawable, blank-order, blank-question, blank-answer, blank-keep-enter, img-click-reload, img-dark-invert, tex-expression, tex-display, tex-leqno |
List of allowed styles
| Positioning | left, right, top, bottom, display, direction |
| Flexbox Layout | flex-direction, flex-grow, flex-shrink, flex-basis, row-gap, column-gap, gap |
| Box Model | 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 |
| Borders | 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 |
| Color and Background | color, background-color |
| Text Formatting | 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 |
List of allowed classes
| General | 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; | |
| Japanese pitch accents | jp-l | low |
| jp-h | high | |
| jp-lt | low and next will be high | |
| jp-ht | high and next will be low | |
| jp-l2 | low, with dashes | |
| jp-h2 | high with dashes | |
| jp-lt2 | low and next will be high with dashes | |
| jp-ht2 | high and next will be low with dashes |