Hi, I have a problem where no matter what font I use, Anki will not display superscript correctly and instead will show it as subscript. Here are two images (one showing the problem and one showing that the superscript is correctly applied in the card. Thnaks for your help.
Could you please send a screenshot of the same thing in the second screenshot, but with the HTML also visible? (It can be accessed by clicking the <> button.)
Also, if possible, could you send the Front Side of the Note type? Go to Manage Notes, select this particular note by its name, click on the Cards button and copy it.
2 Likes
here it is. Front and CSS is custom by editing this Anki addon for multiple choice with ChatGPT to add some functionality.
Front:
<script>
// v1.1.8 - Persistence script remains unchanged
if (void 0 === window.Persistence) {
var e = "github.com/SimonLammer/anki-persistence/", t = "_default";
if (window.Persistence_sessionStorage = function () {
var i = !1;
try {
"object" == typeof window.sessionStorage && (i = !0, this.clear = function () {
for (var t = 0; t < sessionStorage.length; t++) {
var i = sessionStorage.key(t);
0 == i.indexOf(e) && (sessionStorage.removeItem(i), t--)
}
}, this.setItem = function (i, n) {
void 0 == n && (n = i, i = t), sessionStorage.setItem(e + i, JSON.stringify(n))
}, this.getItem = function (i) {
return void 0 == i && (i = t), JSON.parse(sessionStorage.getItem(e + i))
}, this.removeItem = function (i) {
void 0 == i && (i = t), sessionStorage.removeItem(e + i)
}, this.getAllKeys = function () {
for (var t = [], i = Object.keys(sessionStorage), n = 0; n < i.length; n++) {
var s = i[n];
0 == s.indexOf(e) && t.push(s.substring(e.length, s.length))
}
return t.sort()
})
} catch (n) {}
this.isAvailable = function () {
return i
}
}, window.Persistence_windowKey = function (i) {
var n = window[i], s = !1;
"object" == typeof n && (s = !0, this.clear = function () {
n[e] = {}
}, this.setItem = function (i, s) {
void 0 == s && (s = i, i = t), n[e][i] = s
}, this.getItem = function (i) {
return void 0 == i && (i = t), void 0 == n[e][i] ? null : n[e][i]
}, this.removeItem = function (i) {
void 0 == i && (i = t), delete n[e][i]
}, this.getAllKeys = function () {
return Object.keys(n[e])
}, void 0 == n[e] && this.clear()), this.isAvailable = function () {
return s
}
}, window.Persistence = new Persistence_sessionStorage, Persistence.isAvailable() || (window.Persistence = new Persistence_windowKey("py")), !Persistence.isAvailable()) {
var i = window.location.toString().indexOf("title"), n = window.location.toString().indexOf("main", i);
i > 0 && n > 0 && n - i < 10 && (window.Persistence = new Persistence_windowKey("qt"))
}
}
</script>
{{#number}}<h3>Question #{{number}}</h3>{{/number}}
{{#question}}<p>{{question}}</p>{{/question}}
<div id="answer-div"></div>
<script>
function returnTemplate(inputType, originalIndex, id, answer) {
var result = '<div class="answer-wrapper">'; // Wrap each answer in a separate box
result += '<div class="answer-div">';
result += '<div><input type="' + inputType + '" onclick="selectAnswer();" name="SelectedAnswer" id="' + id + '" /></div>';
result += '<div>' + String.fromCharCode(originalIndex + 65) + '. </div>'; // Non-breaking space added here
result += '<div><label for="' + id + '">' + answer + '</label></div>';
result += '</div>';
result += '</div>';
return result;
}
function shuffle(array) {
let currentIndex = array.length;
while (currentIndex != 0) {
let randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex--;
[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
}
}
function selectAnswer() {
var SelectedAnswer = [];
for (var i = 0; i < answerJson.length; i++) {
if (document.getElementById(answerJson[i].id).checked) {
SelectedAnswer.push(answerJson[i].id);
}
}
if (Persistence.isAvailable()) {
Persistence.clear();
Persistence.setItem("SelectedAnswer", SelectedAnswer);
Persistence.setItem("DivArray", divArray);
}
}
var answersArray = `{{answers}}`.toLowerCase().split(",");
var answerJson = [
{{#a}}{ "id": "a", "answer": `{{a}}`, "originalIndex": 0 },{{/a}}
{{#b}}{ "id": "b", "answer": `{{b}}`, "originalIndex": 1 },{{/b}}
{{#c}}{ "id": "c", "answer": `{{c}}`, "originalIndex": 2 },{{/c}}
{{#d}}{ "id": "d", "answer": `{{d}}`, "originalIndex": 3 },{{/d}}
{{#e}}{ "id": "e", "answer": `{{e}}`, "originalIndex": 4 },{{/e}}
{{#f}}{ "id": "f", "answer": `{{f}}`, "originalIndex": 5 },{{/f}}
{{#g}}{ "id": "g", "answer": `{{g}}`, "originalIndex": 6 },{{/g}}
{{#h}}{ "id": "h", "answer": `{{h}}`, "originalIndex": 7 },{{/h}}
];
shuffle(answerJson);
var answerDiv = document.getElementById("answer-div");
var divArray = [];
for (var i = 0; i < answerJson.length; i++) {
divArray.push(answerJson[i].id);
var inputType = answersArray.length > 1 ? "checkbox" : "radio";
answerDiv.innerHTML += returnTemplate(inputType, answerJson[i].originalIndex, answerJson[i].id, answerJson[i].answer);
}
if (Persistence.isAvailable()) {
Persistence.clear();
Persistence.setItem("SelectedAnswer", []);
Persistence.setItem("DivArray", divArray);
}
</script>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Literata:wght@400;700&display=swap');
.card {
font-family: 'Literata', serif; /* Set Literata as the default font */
font-size: 35px; /* Set font size to 35px */
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100%; /* Ensure the content spans full height */
}
/* Center the title and question */
.card h3,
.card p {
text-align: center;
}
.card h3 {
margin-top: 0px; /* Adjust spacing above the question number */
}
sup {
vertical-align: super;
font-size: 70%; /* Adjust as needed */
}
/* Add space below the question number (before the question text) */
.card p {
margin-top: -10px; /* Adjust spacing between question number and question text */
}
.answer-wrapper {
border: 2px solid #ccc; /* Light gray border for separation */
padding: 10px;
margin-bottom: 10px; /* Space between each answer box */
border-radius: 8px; /* Rounded corners for better visuals */
width: 100%; /* Ensures all boxes stretch to the same width */
display: inline-block; /* To make them behave like inline-blocks */
word-wrap: break-word; /* Ensure long answers wrap */
white-space: pre-wrap; /* Wrap the text for long answers */
}
.correct-wrapper {
background-color: #009900; /* Green background for correct answers */
}
.missed-wrapper {
background-color: #d4af37; /* Gold background for missed answers */
}
.incorrect-wrapper {
background-color: #880000; /* Red background for incorrect answers */
}
/* Wrap all answers in a centered container */
#answer-div {
display: flex;
flex-direction: column; /* Stack answers vertically */
align-items: center; /* Center all answers horizontally */
margin: 0 auto; /* Center the container itself */
}
.answer-div {
display: flex;
align-items: flex-start; /* Ensure checkbox aligns with the start of the answer text */
text-align: left;
width: 100%;
flex-wrap: nowrap; /* Prevent wrapping of answer elements */
}
.answer-div div:nth-child(1) { /* Symbol container */
display: inline-block;
width: 30px; /* Fixed width for consistent alignment */
margin-right: 10px;
text-align: center;
}
.answer-div div:nth-child(2) { /* Checkbox container */
display: inline-block;
width: 30px; /* Fixed width for consistent alignment */
margin-right: 10px;
text-align: center;
white-space: nowrap; /* Prevent wrapping of checkboxes */
vertical-align: top; /* Align the checkbox to the top */
}
.answer-div div:nth-child(3) { /* Answer text container */
flex-grow: 1; /* Allow the text to take the remaining space */
text-align: left; /* Ensure text aligns to the left */
word-wrap: break-word; /* Allow long text to wrap to the next line without affecting checkbox */
}
.answer-div div:nth-child(4) {
display: inline-block;
margin: 5px 5px 5px 5px;
width: 20px;
}
.answer-div label{
display: inline-block;
vertical-align: top;
}
input.disabled-input {
pointer-events:none;
}
.correct {
background-color: #009900;
}
.correct-background {
background-color: #009900;
}
.correct:after {
content: '✔';
position: relative;
float: right;
left: 0;
top: 0px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #008000;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
.missed {
background-color: #d4af37; /* Gold background for the missed answer */
}
.missed-background {
background-color: #d4af37; /* Gold background for the div */
}
.missed:after {
content: '';
position: relative;
float: right;
left: 0;
top: 0;
width: 20px; /* Circle size */
height: 20px;
background: #d4af37; /* Gold color */
border-radius: 50%; /* Makes it circular */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); /* Depth effect */
border: 1px solid #aaa; /* Border for styling consistency */
}
.incorrect {
background-color: #880000;
}
.incorrect-background {
background-color: #880000;
}
.incorrect:after {
content: '✘';
position: relative;
float: right;
left: 0;
top: 0px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #800000;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* Align the checkbox and its label */
.answers label {
display: flex; /* Horizontal alignment for checkbox and text */
align-items: flex-start; /* Align the checkbox at the top of the text */
gap: 10px; /* Space between checkbox and text */
line-height: 1.5; /* Ensure proper line spacing for text */
}
.answers input[type="checkbox"] {
margin: 0; /* Remove extra margins around the checkbox */
transform: scale(1.2); /* Slightly enlarge checkbox for better visibility */
}
.answers label span {
display: block; /* Ensures multiline text stays within its area */
white-space: pre-wrap; /* Prevents text overflow and wraps long lines */
text-align: left; /* Align text to the left for readability */
}
.answers {
padding: 10px; /* Padding around the entire answer section */
}
sub, sup {
vertical-align: baseline; /* Align subscripts/superscripts more naturally */
position: relative;
font-size: 0.75em; /* Adjust font size for better proportion */
}
/* Adjust the size of the checkboxes (if any) */
input[type="checkbox"], input[type="radio"] {
transform: scale(2); /* Scale the checkbox size */
}
I don’t have much of an expertise in JS, so I’ll have to leave it to the hands of others to help you, but I suspect that the JS is removing the HTML part present in your fields (intentionally or not, I can’t say).
(Side note: Do you think that you could use MathJax instead, I think that might not face this issue. Use the \ce{} part for the electronic configuration like so: “\ce{_5^{11}B: [He] 2s^2 2p_x^1}”
This would be inside a MathJax block which you can add by clicking the fx button and then choosing MathJax)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.