I have a simple JavaScript game to teach my girlfriend the Hindi alphabet. However, it doesn’t look very good because the letter flashcard has some kind of vertical margin, padding or line height that I can’t get rid of. I coded the p#card for padding: 0 and margin: 0 and line-height for a few pixels more than the font-size but I still have this annoying extra space that shrinks but remains after I shrink the text. Any help would be greatly appreciated. Thank you.
https://codepen.io/Brian-O-the-solid/pen/mdZQeXN
const hindiAlphabet = [
// Vowels
{
letter: "अ",
pronunciation: "a",
example: "अनार",
exampleTranslation: "pomegranate"
},
{
letter: "आ",
pronunciation: "aa",
example: "आम",
exampleTranslation: "mango"
},
{
letter: "इ",
pronunciation: "i",
example: "इमली",
exampleTranslation: "tamarind"
},
{
letter: "ई",
pronunciation: "ee",
example: "ईख",
exampleTranslation: "sugarcane"
},
{
letter: "उ",
pronunciation: "u",
example: "उल्लू",
exampleTranslation: "owl"
},
{
letter: "ऊ",
pronunciation: "oo",
example: "ऊंट",
exampleTranslation: "camel"
},
{
letter: "ऋ",
pronunciation: "ri",
example: "ऋषि",
exampleTranslation: "sage"
},
{
letter: "ए",
pronunciation: "e",
example: "एड़ी",
exampleTranslation: "heel"
},
{
letter: "ऐ",
pronunciation: "ai",
example: "ऐनक",
exampleTranslation: "spectacles"
},
{
letter: "ओ",
pronunciation: "o",
example: "ओस",
exampleTranslation: "dew"
},
{
letter: "औ",
pronunciation: "au",
example: "औरत",
exampleTranslation: "woman"
},
{
letter: "अं",
pronunciation: "an",
example: "अंगूर",
exampleTranslation: "grapes"
},
{
letter: "अः",
pronunciation: "ah",
example: "वह",
exampleTranslation: "that"
},
// Consonants
{
letter: "क",
pronunciation: "ka",
example: "कमल",
exampleTranslation: "lotus"
},
{
letter: "ख",
pronunciation: "kha",
example: "खरगोश",
exampleTranslation: "rabbit"
},
{
letter: "ग",
pronunciation: "ga",
example: "गमला",
exampleTranslation: "pot"
},
{
letter: "घ",
pronunciation: "gha",
example: "घड़ी",
exampleTranslation: "watch"
},
{
letter: "ङ",
pronunciation: "nga",
example: "अंग",
exampleTranslation: "part"
},
{
letter: "च",
pronunciation: "cha",
example: "चमक",
exampleTranslation: "shine"
},
{
letter: "छ",
pronunciation: "chha",
example: "छाता",
exampleTranslation: "umbrella"
},
{
letter: "ज",
pronunciation: "ja",
example: "जहाज",
exampleTranslation: "ship"
},
{
letter: "झ",
pronunciation: "jha",
example: "झंडा",
exampleTranslation: "flag"
},
{
letter: "ञ",
pronunciation: "nya",
example: "ज्ञान",
exampleTranslation: "knowledge"
},
{
letter: "ट",
pronunciation: "ṭa",
example: "टोपी",
exampleTranslation: "cap"
},
{
letter: "ठ",
pronunciation: "ṭha",
example: "ठंडी",
exampleTranslation: "cold"
},
{
letter: "ड",
pronunciation: "ḍa",
example: "डमरू",
exampleTranslation: "drum"
},
{
letter: "ढ",
pronunciation: "ḍha",
example: "ढोल",
exampleTranslation: "dhol"
},
{
letter: "ण",
pronunciation: "ṇa",
example: "अर्णव",
exampleTranslation: "ocean"
},
{
letter: "त",
pronunciation: "ta",
example: "तारा",
exampleTranslation: "star"
},
{
letter: "थ",
pronunciation: "tha",
example: "थाली",
exampleTranslation: "plate"
},
{
letter: "द",
pronunciation: "da",
example: "दादी",
exampleTranslation: "grandmother"
},
{
letter: "ध",
pronunciation: "dha",
example: "धन",
exampleTranslation: "wealth"
},
{
letter: "न",
pronunciation: "na",
example: "नल",
exampleTranslation: "tap"
},
{
letter: "प",
pronunciation: "pa",
example: "पानी",
exampleTranslation: "water"
},
{
letter: "फ",
pronunciation: "pha",
example: "फल",
exampleTranslation: "fruit"
},
{
letter: "ब",
pronunciation: "ba",
example: "बकरी",
exampleTranslation: "goat"
},
{
letter: "भ",
pronunciation: "bha",
example: "भालू",
exampleTranslation: "bear"
},
{
letter: "म",
pronunciation: "ma",
example: "मकान",
exampleTranslation: "house"
},
{
letter: "य",
pronunciation: "ya",
example: "यात्रा",
exampleTranslation: "journey"
},
{
letter: "र",
pronunciation: "ra",
example: "रोटी",
exampleTranslation: "bread"
},
{
letter: "ल",
pronunciation: "la",
example: "लड़की",
exampleTranslation: "girl"
},
{
letter: "व",
pronunciation: "va",
example: "वृक्ष",
exampleTranslation: "tree"
},
{
letter: "श",
pronunciation: "sha",
example: "शेर",
exampleTranslation: "lion"
},
{
letter: "ष",
pronunciation: "ṣha",
example: "षट्कोण",
exampleTranslation: "hexagon"
},
{
letter: "स",
pronunciation: "sa",
example: "समुद्र",
exampleTranslation: "ocean"
},
{
letter: "ह",
pronunciation: "ha",
example: "हाथी",
exampleTranslation: "elephant"
},
{
letter: "क्ष",
pronunciation: "kṣa",
example: "क्षत्रिय",
exampleTranslation: "warrior"
},
{
letter: "त्र",
pronunciation: "tra",
example: "त्रिशूल",
exampleTranslation: "trident"
},
{
letter: "ज्ञ",
pronunciation: "gya",
example: "ज्ञान",
exampleTranslation: "knowledge"
}
];
card = document.getElementById("card");
index = 0;
hindi = hindiAlphabet[index].letter;
english = hindiAlphabet[index].pronunciation;
card.innerHTML = hindi;
side = "hindi";
function flip() {
if (side == "hindi") {
card.innerHTML = english;
side = "english";
} else {
card.innerHTML = hindi;
side = "hindi";
}
}
function refresh() {
hindi = hindiAlphabet[index].letter;
english = hindiAlphabet[index].pronunciation;
card.innerHTML = hindi;
side = "hindi";
console.log("index refreshed to " + index);
}
function backward() {
if (index == 0) {
index = 47;
refresh();
} else {
index = index - 1;
refresh();
}
}
function forward() {
if (index == 47) {
console.log("index is 47");
index = 0;
refresh();
} else {
index = index + 1;
refresh();
}
}/* Here is my css.It 's not complicated. There has been a lot of effort to get rid of the extra vertical padding on the flashcard. */
body {
background-color: #FFD700;
}
.field {
width: 90%;
margins: 0 auto;
padding: 0;
}
#card {
width: 100%;
font-size: 200px;
padding: 0;
margins: 0;
text-align: center;
vertical-align: middle;
color: #FF5733;
}
.button-box {
width: 90%;
margins: 0 auto;
}
.button {
font-size: 3em;
color: blue;
width: 46%;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}<!doctype html>
<html lang="hi">
<head>
<link rel="stylesheet" type="text/css" href="hindi-styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hindi Alphabet</title>
</head>
<body>
Here is my html. It's just a simple empty box to insert the letter flashcards into using JavaScript.
<div class="field" id="field" onclick="flip();">
<p id="card"></p>
</div>
<div class="button-box">
<div class="back button" onclick="backward();">
<p>Back</p>
</div>
<div class="next button" onclick="forward();">
<p>Next</p>
</div>
<div class="button-box">
<script type="text/javascript" src="hindiAlphabet.js"></script>