Either I am misunderstanding something or drawFittedText is somewhat flawed. It’s probably me
My test component size is;
setSize (576, 270);
void MainComponent::paint (Graphics& g)
{
g.fillAll (Colour::fromRGB(0, 0, 64));
g.setColour (Colours::white);
g.setFont (15);
g.drawText ("Width " + String (getWidth()), 0, 0, 100, 15, 1);
g.drawLine (0, 40, getWidth (), 40, 3);
g.drawFittedText ("Control your paddle to steer a ball toward the bricks; Lime colored gives a bonus life, yellow gives ball breakthrough power and are worth 20 points, dark blue are solid's that are initially worth 5 points, but increases in value, brightens and eventually turns into regular bricks worth 10 points. Each cleared level increases ball speed! Use the 'Spacebar' to pause the game.",
0, 50, getWidth(), 75, Justification::left, 5, 1.0f);
}
As can be seen I am giving the width of the screen (app component) as a parameter, but as one can see below, there is lots of unused space on the right, which could clear fit more text. Note it does not matter what I set last parameter, “minimumHorizontalScale” to.
This problem continues if I resize the width during app run, all the way up to 599, but at width 600 it looks great using entire width.
Yes it does use the full width with that, but not only is the large word spacing ugly, it is now also very unreadable. Justified is normally only used for print (books and magazines), not screen text as the uneven right margin makes it easier to follow which line you were on and where your eyes need to go next.
“Can justified text be justified for the web? The answer, in case you were wondering, is no! As you continue to read this article I will explain the disadvantages of justified text, and when it should be used.”
No, but that is because your overall design of that textbox already is “suboptimal” ( = it sucks). There should be a margin around the text in all directions. The text should be split into paragraphs and the font looks cheap too.
Congrats on finding an article that reinforces your opinion.
Yes I believe you are right it will probably look less ugly with a larger margin. However I still think justified text does not belong, in most cases, for web pages, and apps. I can’t even find one single news website that does not use left justification.
Anyways for this particular simple app I want to keep this simple menu with simple brief instructions, as small as possible so the user can see what is behind, as when the setting buttons and sliders, which are, in my app, right under the instructions, are changed they reflect immediately underneath. So I rather not make the menu window larger so I can have larger margins, plus paragraphs.
So I am still trying to figure why left justification is leaving so much space on the right. It seems the code that tries to make the text fit needs to be corrected a bit.
Thank you very much for taking the time to check what the function actually does. I was now able to get an acceptable result by setting number of lines to 4 and scale to 0.0f.
A better function, in case of left and right justification, should perhaps lay out n-1 lines using total width.
Layout is a task, where we often put assumptions in, that an algorithm cannot do.
It is unknown, if it should align the outer borders of your text block anywhere.
In your specific case, I think it should have a centre and grow around, and produce a block, that has something close to the “golden ratio” width to height.
So the cleanest solution would be to create a TextLayout, get its width and height and draw it in a centred box.
untested:
TextLayout layout;
layout.createLayout (AttributedString ("Your long text"));
auto box = getLocalBounds().withSizeKeepingCentre (layout.getWidth(), layout.getHeight());
layout.draw (g, box.toFloat());
And have a look into the options you can have with TextLayout, there are probably more refinements possible…
Alright I’ll try TextLayout, but I disagree that you are claiming the algorithm does not know the outer border, as the function is specifically given a width parameter. I am 100% sure I can, if I had the time, write a better function that will fully take into consideration the width, and in case of left and right justification, will then use the full width, much better than currently, for the first n-1 lines. Perhaps after my app, just to proof to myself I will try and improve that function.
