how to vertically center multiline text?

[hiccup]

Here's something I can't figure out at the moment:
When e.g. having an album title in a block, you can position it at the vertical center of it:




When you have a very long title (and have multiline enabled) it will then look like this:




But I want multiple lines also being vertically centered, like this:



I've been trying some stuff but have failed.
Does anyone have an idea?

Here is a simple test TM for trying this out:

Code

<?xml version="1.0" encoding="utf-8"?>
<root>

<settings enableScaling="true"/>

 <element name="#block1" type="block"
 xAnchor="Panel.30" x="0" widthDock="x:Panel.70"
 yAnchor="Panel.40" y="0"  height="140" bg="0,50,0"/>

 <element type="Field" id="Album"
 xAnchor="#block1.Left" x="0" widthDock="X:#block1.Right" width="0"
 yAnchor="#block1.Center" y="-25" heightDock="y:#block1.Bottom"
 align="Center" multiLine="true" font="Segoe UI" style="Regular" size="26" fg="185,185,185" >
 </element>

</root>

[Mayibongwe]

Vertical alignment on Text elements is not supported at the moment, and there seems to be historical complications to it:
https://getmusicbee.com/forum/index.php?topic=36087.0


.........................unrelated.........................

You may already know, but just in case:

-   There is no need to define a positional attribute when its value is zero (MB already knows that to be the default).
    e.g   x="0"   or   height="0" etc.

-   There is no need to name an element when only one of its type is defined.
    names were introduced to prevent conflicts between elements of the same type. So when we only have one element, referencing its literal name is sufficient. i.e block.Left

Edited for clarity

[hiccup]

Vertical alignment on type="Text" is not supported at the moment…
You may already know, but just in case:…

Thanks, at a quick glance both seem valuable information indeed.
I will take a better look at it this weekend, do some more testing, and then perhaps ask some more questions, or create one or two wishlist requests.

[hiccup]

Vertical alignment on Text elements is not supported at the moment, and there seems to be historical complications to it:
https://getmusicbee.com/forum/index.php?topic=36087.0

I will definitely need to dive into that.
To give an impression of why I am raising this, and what I am working on:  (a pretty simple album view)



it looks good with shorter 'normal' names and titles, but you can imagine what happens with long track and album titles and long album artist names :-(

[Bee-liever]

@hiccup
another way would be to use scaling text for those times when titles are too long.

Code

<?xml version="1.0" encoding="utf-8"?>
<root>

<settings enableScaling="true"/>

 <element name="#block1" type="block"
 xAnchor="Panel.30" x="0" widthDock="x:Panel.70"
 yAnchor="Panel.40" y="0"  height="140" bg="0,50,0"/>

 <element type="Field" id="Album"
 xAnchor="#block1.Left" x="0" widthDock="X:#block1.Right" width="0"
 yAnchor="#block1.Center" y="-25" heightDock="y:#block1.Bottom"
 align="Center" multiLine="true" font="Segoe UI" style="Regular" size="26" minSize="7" fg="185,185,185" >
 </element>

</root>

[hiccup]

@hiccup
another way would be to use scaling text for those times when titles are too long.

Thanks Bee-liever, but that code is the exact same as I gave as an example?

Also, Steven wrote here that the feature of scaling fonts was removed a while back.
But maybe I am misunderstanding what you are suggesting?

But, I also happened to think (same as you) about a vertical alignment solution that includes decreasing the font size when long text gets split to a new line.
That will be an added complication to solving this, but I'll suggest it just the same:


Theater Mode feature request:

1. Allow for multi-line text to be vertically aligned. (see startpost for examples)

2. Optionally make the font size smaller when multi-line is forced. (perhaps some 20%, or a defined size)

[tjinc]

hiccup - Bee-liever's code has an additional 'minSize' property in this line:

Code

 align="Center" multiLine="true" font="Segoe UI" style="Regular" size="26" minSize="7" fg="185,185,185" >

I have just tried this and it does appear to work.
I'm not sure how it would interact with the multiline property as I am not currently using that - I'll maybe try that later.


Thanks Bee-liever, I was not aware of this property and it resolves a small annoyance that I have had for some time.

[Bee-liever]

Thanks Bee-liever, but that code is the exact same as I gave as an example?

Except for one little addition:
size="26" minSize="7" fg="185,185,185"

The font will automatically be adjusted to use the largest size possible in the range 26pt down to 7pt for that element only
 (tjinc posted while I was typing    )

[hiccup]

Thanks Bee-liever, but that code is the exact same as I gave as an example?

Except for one little addition:
size="26" minSize="7" fg="185,185,185"

Doh!
I didn't see the difference at first, so I then used notepad++'s compare function to check.
And I somehow managed to copy the same code in both left and right panels.
Doh! again.

Thanks, that's a great little feature indeed. (Mayibongwe, are you taking notes? ;-)

It won't help in vertically aligning multi-line text though...

[Mayibongwe]

Thanks, that's a great little feature indeed. (Mayibongwe, are you taking notes? ;-)

Yessir. minSize is now added to the guide.
Thanks Bee-liever. I must have missed it when you brought it up here.

Also, Steven wrote here that the feature of scaling fonts was removed a while back.

I will have to amend/remove that enableScaling, I see.

[Steven]

This should work
updated theatre mode plugin:
https://mega.nz/file/RllnVDhQ#b9wGh5b5tZLAEygQK0_CDe59tzlkg45qhFmpmM9x7k4

Code

<?xml version="1.0" encoding="utf-8"?>
<root>

 <element name="#block1" type="block"
 xAnchor="Panel.30" x="0" widthDock="x:Panel.70"
 yAnchor="Panel.40" y="0"  height="140" bg="0,50,0"/>

 <element type="Field" id="Album"
 xAnchor="#block1.Left" x="0" widthDock="X:#block1.Right" width="0"
 yAnchor="#block1.Top" y="0" heightDock="y:#block1.Bottom"
 align="Middle.Center" multiLine="true" font="Segoe UI" style="Regular" size="26" minSize="7" fg="185,185,185" >
 </element>
 
</root>

[hiccup]

This should work

Thanks, it indeed seems to function perfectly.