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> <!-- abstract end -->

  </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>

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article