Highlight and read section by using HTML

Osama ghanem · July 10, 2022

I want to highlight a line / section of text in html. By set tags e.g. id, to each section of text I wish to highlight, then run a javascript function to apply the highlight to that identified section of text. Then I would need to pass the selected text position back to the app in order to play the relevant sound.

This is the code:

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<meta name="author" content="Ghica van Emde Boas">
<style>

@font-face {
font-family: quran2;
src: url('me_quran_volt_newmet.ttf');
}

body {
text-align: justify;
text-justify: inter-word;
background-color: #D9EAE6;
}

.arab1b {
font-size: 18px;
font-family: quran2;
}

.highlight {
background-color: yellow;
}

.div_style_block {
text-align: center;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
}

.bg_green {
background-color: #D9EAE6;
}

.bg_grey {
background-color: #F0F0F0;
}

.div_style_inline {
display: inline;
}

</style>
<script>

window.smoothScroll = function (target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 1;
} while (scrollContainer.scrollTop == 0);

var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);

scroll = function (c, a, b, i) {
i++;
if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function () {
scroll(c, a, b, i);
}, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);

}

</script>

</head>
<body>

<script>
var oSentence = "sntnce1";
var nSentence = 'b';

document.write(window.AppInventor.getWebViewString());
</script>

//var elemDebug = document.getElementById("debug");
//elemDebug.innerHTML = window.oSentence;

window.setInterval(function () {

nSentence = window.AppInventor.getWebViewString();
if (nSentence.length < 10) {
//elemDebug.innerHTML = window.oSentence + " " + nSentence;

if (nSentence !== window.oSentence) {
//elemDebug.innerHTML = nSentence + " not equal! " + window.oSentence;
document.getElementById(nSentence).classList.add("highlight");
var elem1 = document.getElementById(window.oSentence);
if(typeof(elem1) != 'undefined' && elem1 != null){
elem1.classList.remove("highlight");
}
var target = nSentence.substr(6) - 1;
var elem2 = document.getElementById("sntnce"+target);
if(typeof(elem2) != 'undefined' && elem2 != null) {
smoothScroll(elem2);
}

window.oSentence = nSentence;

//elemDebug.innerHTML = nSentence + " equal! " + window.oSentence;
}
}
}, 1000);

smoothScroll(document.getElementById('sntnce1'));

</script>

</body>
</html>

Sign In

Highlight and read section by using HTML

Recommended Posts

Osama ghanem

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity