Doiciméadú

Déanfar cur síos anseo ar an gcaoi ar féidir an léitheoir gréasáin a chur le leathanach gréasáin. Níl i gceist ach beagáinín HTML agus Javascript a chur leis.

Na Codanna ‒ Céim ar Chéim

Ar dtús, caithfear nasc chuig an script abair-web-ui.js a chur leis an leathnach HTML. Tá an script seo freagrach as UI a lódáil.

                        
<head>

<script type="text/javascript" src="https://phoneticsrv3.lcs.tcd.ie/abair_webreader/js/abair-web-ui.js"></script>

</head>

Ansin, cuir <div> leis an leathanach pé áit is mian leat. Beidh UI an léitheora gréasáin istigh san <div> céanna. Mar sin, ní miste an áit a roghnú go cúramach. Áit a mbeidh sé so-fheicthe.

Tábhachtach: caithfidh id a bheith ag an <div> ionas gur féidir le Javascript é a aimsiú níos deireanaí. Tabhair do rogha id air.

                        

<div id="custom-wr-container"></div>

Taibhair id ar an eilimint ina mbeidh an téacs, <div> mar shampla.

                        

<div id="my-content"><!-- Your text content is here --></div>

Cuir an script seo a leanas leis an leathanach HTML (cuir isteach idir <script></script> é). Ní foláir an fheidhm positionAbairWebreader a bheith ann. Ní bheidh an léitheoir gréasáin á lódáil dá huireasa.

                        
<script>

    /* This function must be present */
    function positionAbairWebreader() {

        /**
            =========== 1. ===========

            Get the element that contains the text
            to be synthesized:
        */
        let myContainer = document.getElementById('my-content')
        if (!myContainer) { return }

        /**
            =========== 2. ===========

        Set the attribute abair-wr="content"
        so that the webreader will find the text
        */
        myContainer.setAttribute('abair-wr', 'content')

        /**
            =========== 3. ===========

            Place the webreader UI on the page:
        */

        /* 3.1. get the webreader's UI */
        let wr = document.querySelector('abair-wr-ui')

        /* 3.2. get your custom container */
        let container = document.getElementById('custom-wr-container')

        /* 3.3. place the webreader UI in the container */
        if (container && wr) {
            container.appendChild(wr)
        }
    }

</script>

Sampla Iomlán

Seo sampla iomlán ina gcuirfimid na codanna thuas le chéile. Má oibríonn gach rud i gceart beidh an chuma seo air.

                        
<html lang="en" xml:lang="en">
    <head>

        <meta charset="UTF-8" />

        <script type="text/javascript" src="https://phoneticsrv3.lcs.tcd.ie/abair_webreader/js/abair-web-ui.js"></script>

        <title>Sampla</title>

    </head>

    <body>

        <!-- this is the container for the webreader UI -->
        <div id="custom-wr-container"></div>

        <!-- this is your content -->
        <div id="my-content">

            <p>Léitheoir Gréasáin <a href="https://abair.ie/">ABAIR</a></p>

        </div>
    </body>


    <script>
        /* This function must be present */
        function positionAbairWebreader() {

            /**
                =========== 1. ===========

                Get the element that contains the text
                to be synthesized:
            */
            let myContainer = document.getElementById('my-content')
            if (!myContainer) { return }

            /**
                =========== 2. ===========

            Set the attribute abair-wr="content"
            so that the webreader will find the text
            */
            myContainer.setAttribute('abair-wr', 'content')

            /**
                =========== 3. ===========

                Place the webreader UI on the page:
            */

            /* 3.1. get the webreader's UI */
            let wr = document.querySelector('abair-wr-ui')

            /* 3.2. get your custom container */
            let container = document.getElementById('custom-wr-container')

            /* 3.3. place the webreader UI in the container */
            if (container && wr) {
                container.appendChild(wr)
            }
        }

    </script>


</html>

Sin é! Tá an léitheoir gréasáin agat anois!