Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Определить размер буквы (https://javascript.ru/forum/xhtml-html-css/85725-opredelit-razmer-bukvy.html)

firep91613 25.01.2024 18:35

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


ruslan_mart 25.01.2024 19:49

Можно так:

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);

firep91613 26.01.2024 13:36

ruslan_mart,
благодарю.

Aetae 26.01.2024 13:56

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

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

firep91613 31.01.2024 17:30

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

Доделаю, потом на канвас перенесу.

Aetae 31.01.2024 18:37

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


Часовой пояс GMT +3, время: 11:10.