jsMarkerClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <script>
        'use strict'
        class Marker {
            static inkPerSymbol = 0.5;
            constructor(color, ink) {
                this._color = color
                this._ink = ink > 100 ? 100 : ink;
            }

            _countSpaces(message,idx = message.length) {
                let spaces = 0;
                for (let spacePos = -1; ((spacePos = message.indexOf(' ', spacePos + 1)) != -1) && (spacePos+1 <= idx); ++spaces);
                return spaces;
            }
            _count(message) {

                let needInk = Math.ceil((message.length - this._countSpaces(message)) * Marker.inkPerSymbol);
                if (needInk <= this._ink) {
                    return message.length;
                }
                else {
                    let len = 0;
                    for (let haveInk = this._ink; haveInk > 0; ++len) {
                        if (message[len] != ' ') {
                            haveInk -= 0.5;
                        }
                    }
                    return len;
                }
            }

            printText(message) {
                let msgPrintableLen = this._count(message);
                if (msgPrintableLen > 0) {
                    document.write(`<h1 style="color: ${this._color};">${message.slice(0, msgPrintableLen)}</h1>`)
                    this._ink -= ((msgPrintableLen - this._countSpaces(message, msgPrintableLen)) * Marker.inkPerSymbol);
                }

                if (msgPrintableLen <= 0 || this._ink <= 0)
                {
                    console.log(`Marker - ${this._color} is empty!`);
                }
            }
        }

        class MarkerFillable extends Marker {
            refill(ink) {
                this._ink += ink > 100 ? 100 : ink;
            }
        }

        let marker1 = new Marker('blue', 13);
        //let msg = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
        marker1.printText('Lorem Ipsum is s');
        marker1.printText('Lorem');
        marker1.printText('Ipsum is si');


        let marker2 = new MarkerFillable('red', 13);
        marker2.printText('Lorem Ipsum is s');
        marker2.printText('Lorem');
        marker2.printText('Ipsum is simply');
        marker2.refill(20);
        marker2.printText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
    </script>
</body>
</html>