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
Feedback sent
We appreciate your effort and will try to fix the article