I have a peculiar math problem. I am developing a hybrid mobile app using HTML/CSS/JS that will support multiple devices. for this reason I have not specified the input box width.
Now I need to truncate the text in the input box but since the width is not specified I cannot compare the length of the text field to a hardcoded value. I can however get the length of the input box (in px) and the font size i use is fixed (10 px)
Is there a way I can calculate how many 14px font size character can fit in a Xpx by Ypx input box?
The way I've achieved this in the past may not be efficient but it does the trick (just about).
The key here is to clone your text and start making alterations to it. You can, with javascript do this cloning on the fly. Put it in an invisible div off the page, and then break the text in to single character chunks. Each of these characters can then be wrapped in a span.
The next step is then to ensure you know your input box's width, and start adding up the widths of your spans, starting from the front. This should just be a case of getting all of the span elements in your custom "off screen" div and iterating through them.
Once you hit the magic width number (or go over it) you know that the number of characters from your word that you can have in the box.
There is a slight quirk with what you're describing, of course, and that is that you may also need to work out how many "lines" of text you can fit in the box, and amend your "total width" accordingly (if you have 1 line that is 100px wide, your max width would be 100px, but if it's 3 lines deep, the max width would be 300px).
As I say though, this may not be efficient processor usage...but it is a solution, and it doesn't require your font to be a certain size or type.
Related
So I am building a quick small website. In the website, when the user is logging in, the website asks for the name. In my database, I have allocated a VARCHAR(255) for the username and restrict the first name to 50 characters when the user is logging in. However, I have no clue how to make sure that the any of the names being displayed on the website don't overflow their designated container. I don't want to use word-wrap: break-word and overflow: auto because I don't want to break up the name or hide part of it. I just want to make sure it fits in its container. How can I make sure that it fits? Thanks in advance.
Yang
Well, if you do not want to break up the name or hide parts of under any circumstances you have three alternative paths to consider, as far as I can see:
Size the designated container element so that it can fit the widest possible 50 character strings. You can get good benchmark for example by creating <span> element with identical font family size containing 50 W characters that should be in most fonts among the widest letter characters. Then inspect the the element in browser inspector to get the maximum width. Maybe finally round up that width in your CSS for the container to be on the safe side and take into account any possible paddings etc. that reduce the inner width.
Make the designated container element width increase dynamically when needed with CSS or Javascript.
Make font size in the designated container element decrease dynamically when needed with Javascript.
I would just like a div, in the center of the page, that contains one line (two words) of h1 text, and that text is justified to the length of the div; meaning, the letters space out (while maintaining their size) to occupy the entire width of the div, and do not go outside the div. And, if I change the browser settings to shorten the width of the page (such as zoom in), the letters will condense (to a point, before breaking up to two lines).
I cannot realistically list all the things I have tried, to no avail. Which includes all the suggestions I have seen on this site to date.
Is it really that complicated? Or am I just missing something obvious?
Please, please help.
I apologize for the "subjective nature" of this request.
So you want the font size to change depending on window width?
In CSS, you can use the vw unit for font-size, so that would respond to the window width, but requires some trial-and-error, I guess.
Apart from that, there's a javascript plugin named fittext (http://fittextjs.com/) which does what you want. I used it on one website and it works quite reliably,
I note there's a way to automatically set column width with autoResizeColumn() but there doesn't appear to be a comparable way to automatically set row height to match the height displayed by setWrap()'d text. How would I script this to determine the height of a given wrapped cell so that I can use it with setRowHeight()? Is there a way to see how the string value of a cell wraps? I believe getRowHeight() returns the "set" height, not the displayed height.
I'm trying to do something comparable to this for Excel: http://excelribbon.tips.net/T010735_Automatic_Row_Height_for_Wrapped_Text.html
In fact, the problem manifests itself when sheets are exported as Excel.
This is really a bug in the export conversion, not something that should be none in a script. That said, it might be possible to approximately determine the row hight by looking at the contents of the row, the font size, and column width, and wrap policy. Won't give you an exact hight, but should be able to get close enough. If you size conservatively, worse case is you may have an extra line of empty space.
There are some potential issues that you might have to work around in doing so (see https://code.google.com/p/google-apps-script-issues/issues/detail?id=4187)
I can effectively create a two column layout in a <select> by using JavaScript to measure the text and add the appropriate number of spaces. However, depending on the font size, the space is ~4 pixels in width, meaning the column on the right kinda wavers to the left or the right up to 3 pixels at a time.
Fixed width is not the solution. Wavering actually looks better in this case. But an alternate space would be even better.
Is there a space of a different width that I can calculate in to reduce the waver?
There are various fixed-width spaces, but they do not work consistently across fonts.
If you need tabular presentation, use a table. This means that instead of a select element, you would use a set of radio buttons. You can then divide the radio button labels in two columns (and put the radio buttons in a column of their own, perhaps).
If the name is like "david" it comes within the allotted space....
but if the name is like "john pal abraham desouza" the allotted space increases automatically..
So i need to have the name occupied in the allotted space by auto resizing the font..
Suggest me a solution..
You can use jQuery to check the length of the string and guess at a suitable font-size, check the rendered width and then adjust again if necessary.
As #Kieran says above, it's not going to be fool-proof - if a name is very long the font-size will be really small. Also, if there are no spaces in a long name, then the text won't wrap over two lines. However, that's a bit of an edge case.
Use a hidden dummy div to do the checking
By using a hidden (using visibility: hidden) and absolutely positioned div with same font CSS settings and copied content, you can easily change font sizes and check div width. When it exceeds certain size you can use the last valid value on your original div. This will avoid visual change of your fonts and content repositioning and recalculation so it will work faster. This will also avoid problems with long non-spaced words.
The same question has already been asked and answered.