Details
-
Suggestion
-
Resolution: Unresolved
-
Not Evaluated
-
None
-
None
Description
When CSS line-height is increased, additional space is added both above and below the text. However, in Qt Quick, additional spacing is only added below the text (see attached screenshots).
This is an issue because design tools like Figma follow the CSS behaviour. We need a way for Qt Quick to follow the same behaviour (perhaps configurable via an enum, similar to Text.lineHeightMode) so that Qt Bridge for Figma can export designs accurately (see QDS-8320 ).
HTML code
<!DOCTYPE html> <html> <head> <style> .row { display: grid; grid-template-columns: 100px 100px 100px; } .rectangle { border: 1px solid; } </style> </head> <body> <div class="row"> <div class="rectangle" style="line-height: 1">Line Height 1<br/>Line Height 1</div> <div class="rectangle" style="line-height: 2">Line Height 2<br/>Line Height 2</div> <div class="rectangle" style="line-height: 3">Line Height 3<br/>Line Height 3</div> </div> </body> </html>
QML code
Row {
id: row
property int groupHeight: Math.max(t1.height, t2.height, t3.height)
Rectangle {
width: 100
height: row.groupHeight
border.color: "black"
Text {
id: t1
lineHeight: 1
text: "Line Height 1\nLine Height 1"
}
}
Rectangle {
width: 100
height: row.groupHeight
border.color: "black"
Text {
id: t2
lineHeight: 2
text: "Line Height 2\nLine Height 2"
}
}
Rectangle {
width: 100
height: row.groupHeight
border.color: "black"
Text {
id: t3
lineHeight: 3
text: "Line Height 3\nLine Height 3"
}
}
}
Attachments
Issue Links
- is required for
-
-
- Open
-