Как Разместить всплывающий блок по центру выделенного текста?

Question

[Лоло]

Я пишу текстовый редактор, и у меня стоит задача всплывающий блок сделать по центру выделенного текста, примерно вот-так:



У меня есть скрипт:

var sel = document.selection, range;
    var top = 0, left = 0;


        // основные браузеры
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                range = sel.getRangeAt(0).cloneRange();
                if (range.getClientRects()) {
                    range.collapse(true);
                    let rect = range.getClientRects()[0];
                    // var rect = range.getBoundingClientRect()[0];

                    alert(rect.width);
                    left = rect.left;
                    top = rect.top;
                    // width = rect.width;
                }
            }
        }
        

        // для IE
         else if (sel) {
             if (sel.type != "Control") {
                 range = sel.createRange();
                 range.collapse(true);
                 left = range.boundingLeft;
                 top = range.boundingTop;
             }
         }

        // получение координат
        var coords = { top:top, left:left, };

Дальше, с помощью скрипта размещаю блок по координатам х и у.
Но он размещает "меню" только с правого края. Кто знает, как разместить по центру выделенного текста "меню"?

Answer 1

[Дуболом Одноклеточный]

Дели значение положения твоего текста на 2, что-то вроде этого:

left = rect.left / 2;
top = rect.top / 2;

Comments

[Лоло]

Не понял, а какой смысл в делении?

[Дуболом Одноклеточный]

Смотри, допустим, мы JS. У js есть элемент, квадрат например:



Чтобы js перешел в центр квадрата, нам нужно в коде, поделить этот квадрат на две части (делим на 2 его ширину и высоту)

Теперь, js в центре квадрата:

[Лоло]

Я понимаю, если бы я знал ширину выделенного текста, то можно было бы поделить её на 2 и прибавить к left, но ширины то я не знаю...
Тут либо узнавать ширину, с чем я не справился, хотя обыскал весь поиск(может я тупой, ну тогда подскажите, прошу, что я делаю не так). Либо, использовать вообще другой метод rang.
Если на ваш взгляд второй более разумный, то подскажите тот самый метод, пожалуйста)

[Дуболом Одноклеточный]

Lolo Pingvin, Попробуй обернуть то что ты выделяешь и просто оберни в тег span и потом, просто подсчитай его ширину высоту и раздели на 2

[Лоло]

Дуболом Одноклеточный, отвечу, как будет результат (прошу прощения , что не сразу, доделываю другой функционал)