Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2024, 18:35
Аспирант
Отправить личное сообщение для firep91613 Посмотреть профиль Найти все сообщения от firep91613
 
Регистрация: 24.10.2023
Сообщений: 58

Определить размер буквы
Подскажите, пожалуйста, как определить размер буквы. Нужно, чтобы правильно ее спозиционировать. font-size стоит 16px, но на самом деле длинна и ширина разные.

Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2024, 19:49
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Можно так:

const element = document.querySelector('svg text');

console.log(element.clientWidth, element.clientHeight);


или так

const element = document.querySelector('svg text');

const rect = element.getBoundingClientRect();

console.log(rect.width, rect.height);
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2024, 13:36
Аспирант
Отправить личное сообщение для firep91613 Посмотреть профиль Найти все сообщения от firep91613
 
Регистрация: 24.10.2023
Сообщений: 58

ruslan_mart,
благодарю.
Ответить с цитированием
  #4 (permalink)  
Старый 26.01.2024, 13:56
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

На самом деле универсально - только через canvas. У шрифтов куча всяких разных отступов и сдвигов: формально буква будет с т.з. html в одном месте и одного размера, а по факту где угодно и какого угодно.

Но в 99% случаев, если надо просто центрировать - всё решит:
display: flex;
align-items: center;
justify-content: center;
__________________
29375, 35

Последний раз редактировалось Aetae, 26.01.2024 в 13:58.
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2024, 17:30
Аспирант
Отправить личное сообщение для firep91613 Посмотреть профиль Найти все сообщения от firep91613
 
Регистрация: 24.10.2023
Сообщений: 58

Aetae,
ну по иксу нормально - по центру (Verdana, Arial, Times), по игреку - да, ерунда получается, разве что в ручную подбирать =)

Доделаю, потом на канвас перенесу.
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2024, 18:37
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

firep91613, если количество букв и шрифтов ограничено - лучше один раз вычислить все коэффициенты и хранить табличку, а не мучать клиаента.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
определить размер экрана GostWalk Events/DOM/Window 1 03.11.2018 23:44
Как правильно перебрать условия из разных таблиц? the_little Общие вопросы Javascript 10 30.10.2017 09:19
Заменить значения value в форме при отправке на email the_little Общие вопросы Javascript 26 29.10.2017 21:26
как определить размер видимой области мобильного браузера ? mitiya Общие вопросы Javascript 5 16.10.2012 18:31
как определить макс. возможный размер клиентской области браузера Svoy4 Events/DOM/Window 4 17.10.2011 08:05