Блог

Главная - Вопросы по программированию - Возможно ли получить / установить ширину символа?

Возможно ли получить / установить ширину символа?

#css #reactjs

#css #reactjs

Вопрос:

Мне нужно иметь ширину каждого символа в моей текстовой области, можно установить или получить.

                    <Field
                        style={{
                           width: "60ch",
                           height: "300px",
                           fontFamily: '"Lucida Console", Monaco, monospace',
                           fontSize: "14px",
                        }}
                        as='textarea'
                        id='text'
                        name='text'
                        type='text'
                        label='Text'
                     />

Я попытался установить a span с тем же размером шрифта и семейством шрифтов, чтобы получить его, и поэтому я бы подсчитал количество символов в каждой строке.

                      <span
                        style={{
                           position: "absolute",
                           top: "-100px",
                           fontFamily: '"Lucida Console", Monaco, monospace',
                           fontSize: "14px",
                        }}
                        id='span'
                     >
                        b
                     </span>

Но, выполняя приведенные ниже вычисления, это не работает даже для ширины по умолчанию (я установил значение 60ch, поэтому каждая строка будет содержать 60 символов). В результате у меня получается, что каждая строка должна содержать 63,125 символов, что неверно.

    document.addEventListener("mouseup", function () {
      let textarea: any = document.querySelector("#text");
      let width = getComputedStyle(textarea).width;
      let height = getComputedStyle(textarea).height;
      console.log(width, height);

      let span: any = document.querySelector("#span");
      let spanWidth = getComputedStyle(span).width;
      console.log('SPAN WIDTH',spanWidth)
      console.log('PER LINE', (parseInt(width.slice(0,-2))/parseInt(spanWidth.slice(0,-2))))

Комментарии:

1. Я не слишком уверен, чего вы хотите, поскольку, если вы используете шрифт не фиксированного размера, количество символов, которые вы можете получить в фиксированной ширине, будет варьироваться в зависимости от текста, и, наоборот, ширина текста из 60 символов будет меняться. Не могли бы вы уточнить, что вы хотите измерить?

Ответ №1:

Я не думаю, что вы можете использовать parseInt() для этого, по крайней мере, сначала. Сначала вам нужно разделить числа как число с плавающей точкой (parseFloat()), а затем вы можете округлить результат, но если вы сначала округлите его с помощью parseInt, у вас возникнет проблема с точностью.

Кроме того, обратите внимание на заполнение элемента по умолчанию, которое может повлиять на ваши вычисления.