You can see in picture above text block is wrapping characters not words. Please guide how can i fix this issue?
Actually, that screenshot also shows that it does wrap at spaces when it can.
But when a single word is too long to fit in the given width, it has to wrap at any character.
Unless you didn’t want it to wrap at all, but just clip?
I am not asking about clipping i am looking for wraping, actually i set font height at runtime according to width and height of node, i am writing down code here please check how can acheive the desired result, thanks :).
function adjustAutoFont(node, auto) {
var textBlock;
if (node.name && node.name === “textBlock”) {
textBlock = node;
}
else {
textBlock = node.findObject(“textBlock”);
}
var finalFontSize;
var initialFontType = auto;
if (textBlock.panel) {
textBlock.part.ensureBounds();
var panelBound = textBlock.panel.actualBounds;
var textBlockMarginHorizontal = 10;
var textBlockMarginVertical = 10;
board.model.commit(function () {
tempTextForAutoFont.width = panelBound.width - textBlockMarginHorizontal;
}, null);
var helperTextBlock = tempTextForAutoFont.findObject("textBlock");
var textSize;
var font;
var actualBounds;
if (!auto) {
textSize = textBlock.part.data.textSize;
font = "" + textSize + "px sans-serif";
board.model.commit(function () {
helperTextBlock.font = font;
helperTextBlock.text = textBlock.text;
}, null);
tempTextForAutoFont.ensureBounds();
actualBounds = helperTextBlock.actualBounds;
if (actualBounds.height > (panelBound.height - textBlockMarginVertical)) {
auto = true;
textBlock.part.data.autoFont = textSize;
textBlock.part.data.textSize = "Auto";
}
}
else {
textSize = textBlock.part.data.autoFont;
font = "" + textSize + "px sans-serif";
board.model.commit(function () {
helperTextBlock.font = font;
helperTextBlock.text = textBlock.text;
}, null);
tempTextForAutoFont.ensureBounds();
actualBounds = helperTextBlock.actualBounds;
}
if (auto) {
var fontStep = 0;
var fit = true;
if (actualBounds.height < (panelBound.height - textBlockMarginVertical)) {
fontStep = 1;
fit = false;
}
else if (actualBounds.height > (panelBound.height - textBlockMarginVertical)) {
fontStep = -1;
fit = false;
}
finalFontSize = textSize;
while (!fit) {
textSize += fontStep;
var font = "" + textSize + "px sans-serif";
board.model.commit(function () {
helperTextBlock.font = font;
helperTextBlock.text = textBlock.text;
}, null);
tempTextForAutoFont.ensureBounds();
var tempBounds = helperTextBlock.actualBounds;
var textMetrics = helperTextBlock.metrics;
var expectedLineHeight = panelBound.height * (0.5 / textMetrics.arrSize.length);
if (fontStep > 0) {
if (tempBounds.height >= (panelBound.height - textBlockMarginVertical) || textMetrics.fontHeight > expectedLineHeight) {
fit = true;
}
}
else {
// $("#logDiv").html(":"+helperTextBlock.metrics.arrSize.length);
if (tempBounds.height <= (panelBound.height - textBlockMarginVertical)) {
fit = true;
}
}
if (!fit) {
finalFontSize = textSize;
}
}
if (finalFontSize != textSize) {
textBlock.part.data.autoFont = finalFontSize;
var font = "" + finalFontSize + "px sans-serif";
board.model.commit(function () {
textBlock.font = font;
}, null);
board.model.updateTargetBindings(textBlock.part.data);
}
}
}
return { changeMode: initialFontType != auto, size: finalFontSize, textBlock: textBlock };
//…
}
I do not understand what you really want to do.
Is the width for the text fixed?
It seems that you are trying to compute a font size, but I cannot tell what the criteria are.
Usually it is easier to use a “Viewbox” Panel, which automatically scales its only element so that it fits in the area provided by the panel. But perhaps your requirements prevent using a “Viewbox” Panel.