We Keep Coding

How to calculate max-height with using max-length property in Textarea

in the above example,input has max character length so user can not able to write anymore. So I have to don't allow resizing beyond 200 characters since that is max for this field. So i think need to calculate max-height property.
Pass maxLength property is 200 , line-height is 18px. Is there any way to calculate max height with these values ?
i found an example here but it doesn't work for me.

You should probably think about contenteditable. Add a few event listeners and you've got a dyanmically sized text area.
contenteditable on MDN
Making content editable also on MDN
To do what you want has too many variables to be done "properly" and the needed size of the textarea will depend on a number of factors such as the font being used, the size of the font.
Of course the content itself would also affect the required size, add a few new lines and you'll need even more height.
The mix of characters would also affect the needed size i.e. capital x's X and m's M take up much more space than periods '.' . and i's i (assuming a variable width font.)
.editable {
border: 1px solid black;
min-height: 1em;
}
<div contenteditable="true" class="editable">
This text can be edited by the user.
</div>

Restrict user input to fixed width and height contenteditable div

After a lot of research, I haven't found a post with exactly the same requirements so I thought write a new post.
I'm trying to create a fixed area (e.g. 200px by 300px) where the user can enter text input. He should be able to enter any character (including line breaks).
However, he should not be able to 'write outside the box' (i.e. there shouldn't be overflow scroll or hidden for the 200x300 area).
Once user reaches the 'bottom' of the area, they can't enter any more line breaks.
And once they reach the 'bottom right' corner of the 200x300 area, they shouldn't be able to enter any more characters at all.
Is this possible in css, angular, js, jquery, etc?

Limit the length of characters with base in font and div's size, but you must change the font size and family or line height because every browser can have different styles.
To limit the length of characters in the div is need to ignore the HTML tags in the content, like interpreting.
Firstly calculate how many characters fits there.

You can restrict the number of characters per line with the cols="" attribute and set the displayed the number of editable lines with the rows="" attribute. However limiting the number of rows could only be one with the maxlength attribute which would control the number of characters you can have, which you'd have to estimate. There are some hacks to limit the number of rows with event listeners, but they seem to have fairly major bugs.

It is possible, you just need to do following:
Use event handlers to control character input process. It is required to be able to stop processing further keystrokes when limit is reached. Use keypress and keydown, first handles character processing, second - control keys processing.
Each time user presses a key, use a separate buffer to produce final result, compute its bounding rectangle, and if it is bigger than limit, prevent event handling.
Height of text body could be calculated by multiplying number of lines by line height (interpret font-size and line-height CSS properties).
Width of text body could be computed rather easy with help of HTML5 canvas measureText method.
If you don't have canvas, you can use offscreen span (or any other inline) element - just fill innerHTML with text block and use its offsetWidth attribute. Actually, if you replace line break characters with <br>, you may use span approach to get both dimensions in one go - just make sure it has same style as editable container.
ContentEditable containers, as i remember, store text body in HTML format already (in other words - with <br>s instead of line break characters).

How to auto change font size by text length

I am making buttons and have a little problem with text. I want all texts on buttons made the same width. My code:
<span class="text">SVDFBDFBSFG</span>
<br />
<span class="text">FHEWFG</span>
<br />
<span class="text">SVDFBDFBSFGSGSFBSN</span>
So texts are not the same lengths, but all buttons are the same width. I need some jQuery code to change font size by text length (then text longer - font smaller), but generated text needs to be 100px wide.

Here is example. changes array is for find if we oscillate around 100px. if yes, it breaks font changing function
http://jsfiddle.net/wasikuss/xbesnw93/

you can get length of string with .length property.
so try this code.
$(".text").each(function(){
var len= $(this).text().length
var calculatedSize = //do calculate font size with length
$(this).css("font-size", calculatedSize)
}

What is actual pixels against text size list in IE?

What is the actual font size in pixels against following text size list in IE:
Largest
Larger
Medium
Smaller
Smallest
In a web application, I need to provide similiar behavior to set the text size of application control by selection anyone from above list. But, how much pixels I need to set programmatically against selected item from this list.
Help will be appreciated.

Testing the current style with Javascript, using this HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test font size</title>
</head>
<body>
<p id="test">This is a test</p>
<script>
var elem = document.getElementById('test');
elem.innerHTML = 'The font size is '+elem.currentStyle.fontSize;
</script>
</body>
</html>
(or if you're too lazy to copy and paste all that, this fiddle)
results in this list:
Text size Largest: 16pt (= 21.3px)
Text size Larger: 14pt (= 18.7px)
Text size Medium: 12pt (= 16px)
Text size Smaller: 10pt (= 13.3px)
Text size Smallest: 9pt (= 12px)
Note: after you change the text size, refresh the screen (or re-run the fiddle) to make the script update the text.
Another note: currentStyle is a proprietary property that works only with IE.
And a final note: I calculated the pixel values based on a DPI of 96; don't know if the results are different on monitors with other DPI values, so use with care.

As described in specs :
The following table provides user agent guidelines for the absolute-size mapping to HTML heading and absolute font-sizes. The 'medium' value is the user's preferred font size and is used as the reference middle value.
HTML Values : xx-small x-small small medium large x-large xx-large
Font sizes : 1 - 2 3 4 5 6
The relative values would follow the table to go larger, smaller (depending on the context) :
Possible values are: [ larger | smaller ]. For example, if the parent
element has a font size of 'medium', a value of 'larger' will make the
font size of the current element be 'large'. If the parent element's
size is not close to a table entry, the UA is free to interpolate
between table entries or round off to the closest one. The UA may have
to extrapolate table values if the numerical value goes beyond the
keywords.
Note that these are simply the guidelines to be followed by the browser & in no way guarantees the sizes in IE. But I believe it does give an idea for what you are looking for.

How do you find the largest font size that won't break a given text?

I'm trying to use CSS (under #media print) and JavaScript to print a one-page document with a given piece of text made as large as possible while still fitting inside a given width. The length of the text is not known beforehand, so simply using a fixed-width font is not an option.
To put it another way, I'm looking for proper resizing, so that, for example, "IIIII" would come out in a much larger font size than "WWWWW" because "I" is much skinnier than "W" in a variable-width font.
The closest I've been able to get with this is using JavaScript to try various font sizes until the clientWidth is small enough. This works well enough for screen media, but when you switch to print media, is there any guarantee that the 90 DPI I appear to get on my system (i.e., I put the margins to 0.5in either side, and for a text resized so that it fits just within that, I get about 675 for clientWidth) will be the same anywhere else? How does a browser decide what DPI to use when converting from pixel measurements? Is there any way I can access this information using JavaScript?
I would love it if this were just a CSS3 feature (font-size:max-for-width(7.5in)) but if it is, I haven't been able to find it.

The CSS font-size property accepts length units that include absolute measurements in inches or centimeters:
Absolute length units are highly dependent on the output medium, and
so are less useful than relative units. The following absolute units
are available:
in (inches; 1in=2.54cm)
cm (centimeters; 1cm=10mm)
mm (millimeters)
pt (points; 1pt=1/72in)
pc (picas; 1pc=12pt)
Since you don't know how many characters your text is yet, you may need to use a combination of javascript and CSS in order to dynamically set the font-size property correctly. For example, take the length of the string in characters, and divide 8.5 (assuming you're expecting US letter size paper) by the number of characters and that gives you the size in inches to set the font-size to for that chunk of text. Tested the font-size with absolute measurements in Firefox, Safari, and IE6 so it should be pretty portable. Hope that helps.
EDIT: Note that you may also need to play around with settings such as the letter-spacing property as well and experiment with what font you use, since the font-size setting isn't really the width of the letters, which will be different based on letter-spacing, and font, proportional to length. Oh, and using a monospace font helps ;)

I don't know of a way to do this in CSS. I think your best bet would be to use Javascript:
Put the text in a div
Get the dimensions of the div
Make the text smaller if necessary
Go back to step 2 until the text is small enough
Here's some sample code to detect the size of the div.

Here's some code I ended up using, in case someone might find it useful. All you need to do is make the outer DIV the size you want in inches.
function make_big(id) // must be an inline element inside a block-level element
{
var e = document.getElementById(id);
e.style.whiteSpace = 'nowrap';
e.style.textAlign = 'center';
var max = e.parentNode.scrollWidth - 4; // a little padding
e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
e.style.display = 'block'; // so centering takes effect
}