[GH-ISSUE #138] Add attributed strings from libui-node 0.2.0 #84

New issue

Closed

opened 2026-05-05 11:39:56 -06:00 by gitea-mirror · 4 comments

gitea-mirror commented

2026-05-05 11:39:56 -06:00

Owner

Originally created by @kusti8 on GitHub (May 19, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/138

https://github.com/parro-it/libui-node/blob/master/docs/attributedstring.md

Originally created by @kusti8 on GitHub (May 19, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/138 https://github.com/parro-it/libui-node/blob/master/docs/attributedstring.md

gitea-mirror closed this issue

2026-05-05 11:39:59 -06:00

gitea-mirror commented

2026-05-05 11:40:04 -06:00

Author

Owner

@mischnic commented on GitHub (May 19, 2018):

They can only be drawn inside an Area (see https://github.com/parro-it/libui-node/blob/master/examples/text.js).

My thoughts: There should be an Area.Text element but also an FancyText element (a better name is to be found) which creates an area internally (if there is no parent FancyText).
The attributes get inherited and specified like in react native (https://facebook.github.io/react-native/docs/text.html).

<FancyText style={{color: "red"}}>
    Some red text
    <FancyText style={{fontSize: 5}}>
        Some smaller red text
   </FancyText>
</FancyText>

Attributes:
fontSize, color, fontWeight, textAlign (only possible for top level), fontFamily, underline (+color), background color, bold/italic

@mischnic commented on GitHub (May 19, 2018): They can only be drawn inside an Area (see https://github.com/parro-it/libui-node/blob/master/examples/text.js). My thoughts: There should be an `Area.Text` element but also an `FancyText` element (a better name is to be found) which creates an area internally (if there is no parent `FancyText`). The attributes get inherited and specified like in react native (https://facebook.github.io/react-native/docs/text.html). ```jsx <FancyText style={{color: "red"}}> Some red text <FancyText style={{fontSize: 5}}> Some smaller red text </FancyText> </FancyText> ``` Attributes: fontSize, color, fontWeight, textAlign (only possible for top level), fontFamily, underline (+color), background color, bold/italic

gitea-mirror commented

2026-05-05 11:40:06 -06:00

Author

Owner

@kusti8 commented on GitHub (May 19, 2018):

Sounds good. Then FancyText would just be a wrapper for Area on the outer, and then Area.Text.

@kusti8 commented on GitHub (May 19, 2018): Sounds good. Then `FancyText` would just be a wrapper for `Area` on the outer, and then `Area.Text`.

gitea-mirror commented

2026-05-05 11:40:10 -06:00

Author

Owner

@mischnic commented on GitHub (May 19, 2018):

EDIT: Yes

I misread your post

Yes, but this has be prevented:

<FancyText style={{color: "red"}}>
    Some red text
    <FancyText style={{fontSize: 5}}>
        Some smaller red text
   </FancyText>
</FancyText>

---->

<Area>
  <Area.Text style={{color: "red"}}>
    Some red text
    <Area> !!!!
      <Area.Text style={{fontSize: 5}}>
        Some smaller red text
      </Area.Text>
    </Area> !!!!
  </Area.Text>
</Area>

@mischnic commented on GitHub (May 19, 2018): **EDIT:** Yes --- *I misread your post* Yes, but this has be prevented: ```jsx <FancyText style={{color: "red"}}> Some red text <FancyText style={{fontSize: 5}}> Some smaller red text </FancyText> </FancyText> ----> <Area> <Area.Text style={{color: "red"}}> Some red text <Area> !!!! <Area.Text style={{fontSize: 5}}> Some smaller red text </Area.Text> </Area> !!!! </Area.Text> </Area> ```

gitea-mirror commented

2026-05-05 11:40:13 -06:00

Author

Owner

@mischnic commented on GitHub (May 20, 2018):

Proof of concept at https://github.com/mischnic/proton-native/tree/font:

class Example extends Component {
  render() {
    return (
      <App>
        <Window
          title="Proton Native Rocks!"
          size={{ w: 300, h: 300 }}
          menuBar={false}
          margined
        >
          <Box>
            <Area>
              <Area.Text x="10" y="30" style={{ color: 'red' }}>
                <Area.Text style={{ fontSize: 20 }}>
                  Hi!
                </Area.Text>
                {'\n'}
                Test{'\n'}
                <Area.Text style={{ color: 'black', fontFamily: 'Arial' }}>
                  Sans serif
                </Area.Text>
              </Area.Text>
            </Area>
          </Box>
        </Window>
      </App>
    );
  }
}

@mischnic commented on GitHub (May 20, 2018): Proof of concept at https://github.com/mischnic/proton-native/tree/font: ![bildschirmfoto 2018-05-20 um 14 00 30](https://user-images.githubusercontent.com/4586894/40278695-484ccc54-5c36-11e8-930f-f975b8331a91.png) ```jsx class Example extends Component { render() { return ( <App> <Window title="Proton Native Rocks!" size={{ w: 300, h: 300 }} menuBar={false} margined > <Box> <Area> <Area.Text x="10" y="30" style={{ color: 'red' }}> <Area.Text style={{ fontSize: 20 }}> Hi! </Area.Text> {'\n'} Test{'\n'} <Area.Text style={{ color: 'black', fontFamily: 'Arial' }}> Sans serif </Area.Text> </Area.Text> </Area> </Box> </Window> </App> ); } } ```