CSS vs BabylonJS GUI questions: line height, letter spacing, inline text styles, units, calc(), and gradients

Questions
1

I’ve got some questions about text control in BabylonJS GUI I couldn’t find answers to in the docs or on the forum.

1: TextBlock: Line Height

Is there an equivalent of CSS’s line-height property for a TextBlock control?

lineSpacing looks like it could be useful, but it doesn’t look like it affects line height, just the spacing between lines.

I also came across fontOffset which has a height property. But I’m not sure if its safe to mess with this property.

2: TextBlock: Letter Spacing

Is there an equivalent of CSS’s letter-spacing for a TextBock control?

The letter-spacing property in CSS allows us to adjust the amount of space between characters in a text. I didn’t come across any properties or accessors to help with this.

3: TextBock: Inline Styles

Is it possible to have basic inline styles in a TextBlock control?

I need to be able to format certain words within a TextBlock as italic. From what I’ve seen, it looks like there’s no way to do in BabylonJS GUI.

4: Units

How can we determine what units are accepted for the various properties in controls?

Is there documentation on what unit values are compatible with a given property?

Color units

  • HEX
  • rgb
  • rgba
  • hsl
  • hsla
  • identifiers/keywords

I believe these are all valid for a color.

Length units

  • percentage
  • px
  • em
  • rem
  • pt
  • cm
  • mm
  • in
  • Q
  • pc
  • ex
  • ch
  • lh
  • vw
  • vh
  • vmin
  • vmax

I know px and percentage are valid. I’m hoping em, rem, and pt could also be valid. If any of the other CSS units are valid, that’d just be a bonus.

5: Calc()

Can we do calculations similar to the calc() CSS function?

Obviously, we can do math in javascript/typescript, but is there a way to mix units like can be done in CSS? For example, this would be valid in CSS: calc( 20% + 100px).

6: Gradients

Like can be done in CSS, can we use a gradient as a background color or in an image?

Any insight into these questions would be greatly appreciated. Thanks!

2

Woot, that is a list :slight_smile:

  1. Line height is build with the font size. There is no additional information used: Babylon.js/textBlock.ts at master · BabylonJS/Babylon.js · GitHub

2.Same nothing here :frowning:

  1. Nope

  2. Colors units can be anything CSS supports but lengths are only pixel or percentage

  3. Nope

  4. Nope

GUI is certainly not CSS (you already have wished it :)) as we need to potentially render 60 times per sec so we have to do tradeoffs.

That being said, if you are ok to contribute some missing features I will gladly check them with you

1 Like
3

Ha! Yeah, I’m trying to be thorough as I design the VR GUI for our app. :smile:

Line Height

I have been playing with the fontOffset.height today, and I’ve got something similar to line-height working.

textBlock.onLinesReadyObservable.addOnce(() => {
    description.fontOffset.height = 32;
  })

This is a decent workaround for someone who wants to control line-height.

I could probably throw together a proposal for an official lineHeight property, but I’d wanna do some additional typography research.

1 Like