Author Topic: how to vertically center multiline text?  (Read 847 times)

hiccup

  • Sr. Member
  • ****
  • Posts: 7710
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

  • Sr. Member
  • ****
  • Posts: 921
  • Heal The World
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
Last Edit: November 17, 2023, 06:35:37 PM by Mayibongwe
Favourite song at the moment:   Decode by Paramore

hiccup

  • Sr. Member
  • ****
  • Posts: 7710
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

  • Sr. Member
  • ****
  • Posts: 7710
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

  • Member
  • Sr. Member
  • *****
  • Posts: 3824
  • MB Version: 3.6.8800 P
@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>
MusicBee and my library - Making bee-utiful music together

hiccup

  • Sr. Member
  • ****
  • Posts: 7710
@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

  • Sr. Member
  • ****
  • Posts: 276
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

  • Member
  • Sr. Member
  • *****
  • Posts: 3824
  • MB Version: 3.6.8800 P
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  :D  )
MusicBee and my library - Making bee-utiful music together

hiccup

  • Sr. Member
  • ****
  • Posts: 7710
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

  • Sr. Member
  • ****
  • Posts: 921
  • Heal The World
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.
Last Edit: November 18, 2023, 10:34:00 AM by Mayibongwe
Favourite song at the moment:   Decode by Paramore

Steven

  • Administrator
  • Sr. Member
  • *****
  • Posts: 34257
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>