/    Sign up×
Community /Pin to ProfileBookmark

How feasible would it be to calculate dimensions of entered text in a web tool?

Hey folks! I am not a web developer, but had a question about the possibility/feasibility of potential project that I might want to hire one for. Essentially, I’m trying to build a tool for my website that allows users to input text, and then depending on the selected size of the font, it calculates the total width and height of the entered text. Mainly, the only part of this tool that I had a question about was the possibility/feasibility of actually calculating the dimensions of the rendered text based on the size option that was selected.

For instance, you can calculate the dimensions of text [pretty simply in Photoshop](https://imgur.com/WZZTCOL) by just cropping the canvas to the edges of the text, and then looking at the Image Size window. Based on the point size of the font, it will show how wide and large the text is. I’m looking to see if this same functionality is able to be built into this prospective website tool.

Below are some very rough mock-ups of what I’m trying to achieve.

[Here’s an example of sizing the rendered text in the “Small” size](https://imgur.com/fihhKXK) (which would be based on the point size of the font), and [here’s an example of the “Medium” size](https://imgur.com/jwtPEwd) (for all the other size options, the calculation could literally just take the whatever dimensions the “Small” size ended up being and scaling that up by a specified percentage).

Really, the only answer I’m looking for is if this dimension calculating is possible to do on a custom web tool, and how difficult of a project this would be for a developer. Any insight would be massively appreciated. Thanks so much!

to post a comment
Full-stack Developer

3 Comments(s)

Copy linkTweet thisAlerts:
@NogDogNov 23.2021 — I did that several years ago using functions in the [PHP GD extension](https://www.php.net/manual/en/ref.image.php), so I'm sure it could also be done in other languages, too. (I made a web page where users could create a screen-saver image for their Kindle, with some customized text on it.)
Copy linkTweet thisAlerts:
@SempervivumNov 23.2021 — @amnesiac03#1639788 On the client side this can be done easily by use of the javascript function getBoundingClientRectangle. You place the text inside a container and this function will calculate the size and the position of the container.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Copy linkTweet thisAlerts:
@tracknutNov 23.2021 — Keep in mind that users can change the size of font display on their browser. So "Medium" as seen by you may not be the same size (letters or the overall bounding box) as it is for me. I don't know the purpose of this tool, but it shouldn't be hard to do it *for a specific browser configuration*.
×

Success!

Help @amnesiac03 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...