I would like to vertically arrange the text of a button within a widget to save space. In CSS I found a wording like ‘text orientation upright’. Is this even possible in OH3 and how can I realize this?
- component: oh-button
config:
action: navigate
actionPage: page:test
iconF7: house_fill
text: irgendwas
outline: true
style:
height: 200px
right: 120px
top: 200px
width: 80px
Yes, this is possible. All css directives just get put in the style object and text-orientation: upright is no different. There are several ways to do this, and text orientation is one of them, however, that’s not the only setting you need in this case. Changing the text orientation just changes the direction that the characters themselves are turned, but if you haven’t also changed the direction that words are written, than setting the character orientation to upright has no effect. So you also have to use writing-mode. Writing mode without reorienting the characters just displays rotated text:
component: f7-block
config: {}
slots:
default:
- component: oh-button
config:
text: Horizontal
fill: true
- component: oh-button
config:
text: Vertical
fill: true
style:
height: 100px
writing-mode: vertical-lr
That’s why you then have to also have text-orientation:
component: f7-block
config: {}
slots:
default:
- component: oh-button
config:
text: Horizontal
fill: true
- component: oh-button
config:
text: Vertical
fill: true
style:
height: 150px
writing-mode: vertical-lr
text-orientation: upright
Hello JustinG,
You have once again helped me very quickly and excellently - as always actually. Thank you and I wish you all the best.