How do I set up my multiline wordWrap TextField to automatically resize its width when height is set? - actionscript-3

I want to create a textfield extension that:
When width is set, automatically resize height by the content of text. Easy done by autosize left, word wrap true, multiline true.
When height is set, automatically resize width by the content of text. Here is my problem.
When both width and height set aren't a case I am interested in.
I've tried several things off the internet, I am stumped.

General solution is impossible, as if the text field contains too many newlines to display within a given height, no matter what width you assign, the text field will be unable to display all the lines. Partial solution is presented by greetification, but it lacks some features one should be aware of. First, no matter what you do, you should not set height to value less than font height, or the text field will not be able to display a single line. Second, if wordWrap is set to false, and multiline to true, the resultant textWidth is the largest desirable width for your text field, so if you adjust the width like greetification advises, stop once you reach the recorded textWidth, as further increases are pointless.
function setHeight(newHeight:Number):void {
var tw:Number;
var th:Number;
if (myTextField.wordwrap) {
myTextField.wordwrap=false;
tw=myTextField.textWidth;
th=myTextField.textHeight;
myTextField.wordwrap=true;
} else {
tw=myTextField.textWidth;
th=myTextField.textHeight;
}
if (newHeight<th) newHeight=th+2; // as below
myTextField.height = newHeight;
while((myTextField.textHeight > myTextField.height)&&(myTextField.width<tw)) {
myTextField.width += 100;
}
if (myTextField.width>tw) myTextField.width=tw+2; // "2" depends on text format
// and other properties, so either play with it or assume a number big enough
}

Not the most elegant solution, but it should work:
function setHeight(newHeight:Number):void {
myTextField.height = newHeight;
while(myTextField.textHeight > myTextField.height) {
myTextField.width += 100;
}
}

Related

Reduce the size of text in angularjs when line breaks?

I have a responsive app for desktop and mobile.
In the app i have a div which randomly shows texts of all kinds of lengths.
I want to do the following:
If the line breaks because the length of the text is too wide for the width of that div, i want the font-size to reduce itself (I am using em's in my app).
Is it something i need to build directive for it? is it something that was built and used wildly?
Writing a robust solution for this problem is going to be non-trivial. As far as I know, there's no way to tell whether a line of text breaks. However, we do know the criteria for line breaking is the width of the text being wider than the element, accounting for padding.
The Canvas API has a method called measureText which can be used to measure a string, using a given context with a font and size set. If you spoof the settings of the element with a canvas, then you can measure the text with the canvas and adjust the size until it fits without overflowing.
I've written up a rough implementation of the way I would tackle this.
function TextScaler(element) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var scaler = {};
scaler.copyProps = function() {
var style = element.style.fontStyle,
family = element.style.fontFamily,
size = element.style.fontSize,
weight = element.style.fontWeight,
variant = element.style.fontVariant;
context.font = [style, variant, weight, size, family].join(' ');
};
scaler.measure = function(text) {
text = text || element.innerText;
return context.measureText(text);
};
scaler.overflows = function() {
var style = window.getComputedStyle(element),
paddingLeft = style['padding-left'],
paddingRight = style['padding-right'],
width = style.width - paddingLeft - paddingRight;
return scaler.measure() > width;
};
scaler.decrease = function() {
// decrease font size by however much
};
scaler.auto = function(retries) {
retries = retries || 10;
if(retries <= 0) {
scaler.apply();
console.log('used all retries');
}
if(scaler.overflows()) {
scaler.decrease();
scaler.auto(retries - 1);
} else {
console.log('text fits');
scaler.apply();
}
};
scaler.apply = function() {
// copy the properties from the context
// back to the element
};
return scaler;
}
After you've sorted out some of the blank details there, you'd be able to use the function something like this:
var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();
If it doesn't manage to decrease it within 10 retries, it will stop there. You could also do this manually.
while(scaler.overflows()) {
scaler.decrease();
}
scaler.apply();
You'd probably want some fairly fine tuned logic for handling the decrease function. It might be easiest to convert the ems to pixels, then work purely with integers.
This API could quite trivially be wrapped up as a directive, if you want to use this with Angular. I'd probably tackle this with two attribute directives.
<div text-scale retries="10">Hello world</div>
Of course, if it's not important that all the text is there onscreen, then you can just use the text-overflow: ellipsis CSS property.

as3 textfield wordwrap true causing textwidth to be weird

I'm trying to wordwrap a textfield inside a button, however after i set wordwrap to true some unexpected behavior happened.
Button.width = 390;
Button.textField.autoSize = TextFieldAutoSize.LEFT;
Button.textField.border = true;
Button.textField.wordwrap = true;
Button.textField.multiline = true;
Button.textField.width = textButton.width - 10;
Button.textField.x = 5;
Button.height = 60;
This is what happens:
When I'm outputting the Button.textField.textWidth, it seems shown a value that so much less than Button or Button.textField.width. I just want to make the word break after textwidth meets the textField.width maximum value. Is there anything that I can do to change this behavior? …since I can't change the value of Button.textField.textWidth (read-only).
Comment out the Button.textField.autoSize setting. This is probably what is throwing everything off.
You're setting the text field's width to match the size of the button when you set width = textButton.width - 10, but you're also telling it to automatically resize the textField to match the size of the actual text when you set the autoSize setting. So it's not going to fit the button the way you want it to.

How to get a RadioButton's label height - AS3

I want to get radioButton's label height in as3.
I have 5 radio buttons in my radioButton group. One of those radioButtons has a three line label, another has a single line etc...
When I try to access the radioButton.height, I always get same value regardless of the label height.
I need to know the height of the label, so I can set the radioButton y coordinate accordingly.
can I change the radioButton's label height?
spacing = 30;
rb.label = tempQQString //from xml. long or short string anyone
rb.group = myGroup;
rb.value = i + 1;
rb.x = answerX;
rb.y = questionField.height + (questionY+20) + (i * spacing); // here use rb.height or rb.textField.height
trace("rb height**" + rb.height) // always get velue 22;
addChild(rb);
RadioButton and any fl control that extends labelButton (all the ones that have a label), expose the actual text field with the .textField property.
So for your example, instead of using rb.height, you would use rb.textField.height to get the height of just the label portion of the control.
You can also set properties on the textField as well.
rb.textField.background = true;
rb.textField.backgroundColor = 0xDDDDDD;
rb.textField.multiline = true;
rb.textField.wordWrap = true;
rb.textField.autoSize = TextFieldAutoSize.LEFT;
now, for your scenario, you may be better off just using the radio button's bounds instead, as it will be the REAL height of the object.
rb.getBounds(rb).height; //this will be the true height of the component.
If your label was one line and your icon was taller than your label, you could potentially be getting a value from rb.textField.height that is smaller than the real height of the radio button.
Try this.
for(var i=0;i<rb.numChildren;i++){
if(rb.getChildAt(i) is TextField){
var txt:TextField = rb.getChildAt(i) as TextField;
trace(txt.height+":"+rb.height);//traces the height of text field and radio button
}
}

border between two columns without height speified

I've got two columns and i need to add line between them. This is 1px solid color so i would love to achieve this with css.
The trick is that content is dynamicaly loaded, so sometimes the left column can have more text and sometimes right column can have more text. Of course if the size of coulmn would be always the same i would add the border to bigger one. But unfortunatly i don't.
So is there a way to achieve this or do i have combine it with php and maybe strlen or something?
You can find simple code for this problem here http://jsfiddle.net/M9TSs/
One way of doing it would be to have a border on both, and use a negative 1px margin to pull the right column over so that the borders overlap:
http://jsfiddle.net/7GCff/
I already solved this using JQuery...
I used this code and it worked great.
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
Source : http://www.cssnewbie.com/equal-height-columns-with-jquery/
Makes all columns have the same height as the longest.

show tinymce contents in a div with flexible though maximum height

When using an editor like tinymce, how could i limit the height of the text a user enters so it doesn't use more space on the webpage than i want it to?
There are 2 things that i want some advise on:
In the editor:
The user enters text in a tinymce editor, he could set a text to font-size say 80px which would use up more space than a normal letter. So it's not the amount of text that i care about it's the height of the total.
In the webpage:
I don't want to give them more than say 200px worth of text on the page. But if they enter just 1 line of text with a small font-size i don't want to show a 200px space. So the height has to be flexible but with a maximum.
I know this isn't exact science but the goal here is to prevent the user from messing up the page.
To solve a similar issue i wrote the following function (placed inside an own tinymce plugin). You will need to add a variable for the maximum case and maybe tweak it a bit, but i hope this code will put you into the right direction
// this function will adjust the editors iframe height to fit in the editors content perfectly
resizeIframe: function(editor) {
var frameid = frameid ? frameid :editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},