rtl & ltr with bg img

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .container{
        background-image: url("pic.png");
        width: 850px;
        height: 500px;
        position: relative;
        margin: auto;
        overflow: hidden;
    }
    .t1{
        position: absolute;
        top: 5;
        color: red;
        font-size: 25pt;
        width: 100%
    }
    .t2{
        position: absolute;
        bottom: 5;
        font-size: 25pt;
        width: 100%;
        text-align: right;
    }
    p{
        margin: 0;
        display: inline-block;
        position: relative;
    }
</style>
<body>
    <div class="container">
        <div class="t1">
            <p>
                الكتاب من هنا من اليسار الى اليمين متحركة
            </p>
        </div>
        <div class="t2">
            <p>
                الكتاب من هنا من اليمين الى اليسار متحركة
            </p>
        </div>
    </div>
    <script>
    var t1 = document.querySelector('.t1 p');
    var t2 = document.querySelector('.t2 p');
    setInterval(function () {
        var i,j;
        i = t1.style.left.indexOf("p");

        if( i!=-1 && t1.style.left.substr(0,i)>=850 )
            t1.style.left = 5-456+"px";
        else{
            console.log()
            if( i == -1 ){
                t1.style.left += 4;
            }else{
                t1.style.left = parseInt(t1.style.left.substr(0,i))+4+"px";
            }
        }

        j = t2.style.right.indexOf("p");
        console.log(t2.style.right.substr(0,j))
        if( j!=-1 && t2.style.right.substr(0,j)>=850 )
            t2.style.right = 5-456+"px";
        else{
            console.log()
            if( j == -1 ){
                t2.style.right += 4;
            }else{
                t2.style.right = parseInt(t2.style.right.substr(0,j))+4+"px";
            }
        }
    },100);
    </script>
</body>
</html>