How do I add font sizing options to my text abstracts?

Modified on Thu, 23 Jun 2022 at 10:55 AM

You can enable your users to change the font for easy abstract reading by including two small sections into your abstract HTML.

Step 1 - Wrap Content in a Div

Ensure all content within your abstract is wrapped in a div with a class called 'abstract'

Example:

<html>

<head>

<meta name='HandheldFriendly' content='TRUE' />

<meta name = 'viewport' content = 'width = device-width' />

</head>

<body>

<div class='abstract' >

your abstract content here

</div>

</body>

</html>

Step 2 - Add the A+ A- Buttons

Below your <div class='abstract' > tag, copy and paste the following section:

<div style='margin-bottom: 10px; width:80%; height:30px'>
<span style='float:right;'>
<button data-role='none' style='border:none; background:none;' aria-label='Decrease font size' onClick='resizeText(-1)'>
<img alt='Decrease font size' id='minustext' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFWFlbgoOE6urqd3h6q6yttra31dXWbW5w4ODgoaKjy8vM9fX1jI2OwMHBYmNll5eZ////RJHQNgAAABF0Uk5T/////////////////////wAlrZliAAAAv0lEQVR42uzU3Q7CIAyG4Q8qf86p93+1FklcUWaAJXrSnixZ8sC7Hgz3AwPFihUrVvx/TMBlFlvwLJPYga9eJzEhGZg5zNVnB9gpzDAf4Oq3JzFfMOVVE+jtCjH7OFc/r7cT2OFajqi7jZh9TLiVB40vrFQ3unswI59n/dh3Bw7bXmgURzZlK6Gru8LpRfiYNIjDFhsQxnAUa+KIOIST+NCubrSr+7rRru7rFth6L34/i/f2x39PxYoVH8MPAQYA6AfWF3cM3SUAAAAASUVORK5CYII=' style='max-width:25px; display:inline'/>
</button>
<button data-role='none' style='border:none; background:none;' aria-label='Increase font size' onClick='resizeText(1)'>
<img alt='Increase font size' id='plustext' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFWFlbq6yt1dXWgoOEbW5w6urqoaKj9fX1tra3wMHBd3h6l5eZ4ODgjI2Oy8vMYmNl////qLIv5QAAABF0Uk5T/////////////////////wAlrZliAAABKklEQVR42uyW0Y6EIAxFywgoA4r//7UrCOjIxQE32ewDfTCxeOBYQ5HWXwR1uMN/B4/MxfgMVuRCPYPfHp4fwYL2GJ/A0wa+W7zpYv1q8aZP63lt8aZP62kd/BWGGgZVgp212F8cw4yIFWBnzUPJRSvslpRBYGqFHWTiB2uEg/WddxmWwfrGuwzzYH3jXYRNtL7xLsKH9e4tW+DDevfmDbA5P++940zilUIT6eNOJNhZzynPT96MCsESzLMxXg0bMGjSVoqxrcCPOxVhCWBZWzB+aT4a1hvDy7V9LOd6f4F11rjsltF1sM1appvOVsFL3vR8aqmBNWi3HHhD2IJGL4E3ghfUqg3wRrCGhwTwRrCFxxPwBvDo9lF+wIC08Puw/w11uMP/Ff4RYADdK8IjCmXDqAAAAABJRU5ErkJggg==' style='max-width:25px; display:inline' />
</button>
</span>

Step 3 - Add the Script

Below your closing </html> tag, copy and paste the following script:

<script>
(function() {
var temp = localStorage.getItem('ep_currentfontsize');
if (temp != null) {
document.getElementsByClassName("abstract")[0].style.fontSize = temp;
if ( parseFloat(temp) >= 1.8 ) {
document.getElementById("plustext").style.opacity = 0.3;
} else if ( parseFloat(temp) <= 1) {
document.getElementById("minustext").style.opacity = 0.3;}
}
})();
function resizeText(multiplier) {
if (document.getElementsByClassName("abstract")[0].style.fontSize == "") {
document.getElementsByClassName("abstract")[0].style.fontSize = "1.0em";
}
if ( multiplier == 1 && parseFloat(document.getElementsByClassName("abstract")[0].style.fontSize) >= 1.8 ) {
document.getElementById("plustext").style.opacity = 0.3;
return;
} else if ( multiplier == -1 && parseFloat(document.getElementsByClassName("abstract")[0].style.fontSize) <= 1 ) {
document.getElementById("minustext").style.opacity = 0.3;
return;
} else {
document.getElementById("plustext").style.opacity = 1;
document.getElementById("minustext").style.opacity = 1;
}
document.getElementsByClassName("abstract")[0].style.fontSize = parseFloat(document.getElementsByClassName("abstract")[0].style.fontSize) + (multiplier * 0.2) + "em";
localStorage.setItem('ep_currentfontsize',document.getElementsByClassName("abstract")[0].style.fontSize);
}
</script>