6d ago

Adjusting dynamic text size to fit within artboard width

Hello! Thank you in advanced for the help!

I am trying to create an animated text bubble and was wondering if there's a way to ensure that the text always fits within the artboard and scales appropriately.

For example, this is what it looks like when the text is short enough to fit in the original artboard:

When the text gets too long, it looks like this:

The desired behavior is for it component to scale down to fit the artboard, so something like this:

I'm not sure if this is something that is configurable in Rive or within the code. I tried messing with both and haven't had much luck. In my test Flutter app, when the text gets too long, it ends up overflowing the parent container despite this configuration:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

extension _TextExtension on Artboard {
  TextValueRun? textRun(String name) => component<TextValueRun>(name);
}

class RiveSample extends StatelessWidget {
  const RiveSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: SizedBox(
        width: 300,
        height: 80,
        child: RiveAnimation.asset(
          'assets/rive/text_wave_effect.riv',
          animations: const ['Timeline 1'],
          fit: BoxFit.fitWidth,
          onInit: (artboard) {
            final textRun = artboard.textRun('TimeRun1')!;
            textRun.text = 'HELLOOOOOOOOOOOOOOO!!!!!!!!!!!!!!';
          },
        ),
      ),
    ));
  }
}

Thank you again! I'm new to Rive (just started playing around with it this week). It's super cool and looking forward to learning more. :)

Edited: to add larger code snippet and app screenshot.

5 replies

6d ago

You can actually do this with the new Layout feature, which means you don't have to use a complex bone setup anymore. 🎉

Here's everything you need to know about Layouts, but I'll also attach a sample button: https://rive.app/community/doc/layouts-overview/docw9p3iTn1R

rive.app

Layouts Overview

buttonLayout.rev

806 KB

5d ago

Thanks for the sample, Lance!

I tried your button example but even when wrapped in a layout, the text still doesn't seem to respect the Artboard's width.

3d ago

I've attached an example where the text wraps and the background adjusts according to the artboard size. Here are my text settings:

variableTextHeight.rev

806 KB

I did end up with a strange issue where at first the background is too tall. If you run into this, here's the workaround. I'll work with the engineers to find a more permanent fix.

2d ago

Thanks for your examples, Lance! I think I'm understanding more where the issue might be.

I checked out variableTextHeight and while that properly keeps the text within the bounds of the artboard, it doesn't dynamically scale the width based on the text length, which is the behavior I am trying to achieve.

This:

vs.

The issue is probably in that I am setting Auto Width to achieve that which disregards the parent artboard width. I was trying to figure out if I could set a max width for the text or a Constraint, but haven't had much luck figuring it out. I'm not sure if it's possible to do or something that is maybe too niche?

Attaching my rev file in case that is helpful. It's still using the bones instead of layout as that's the tutorial I originally followed, but open to replacing it with Layout if that's the solution!

Thank you again for your time and help!

text_wave_effect.rev

474 KB

12h ago

I have good news! The engineers going to slightly adjust how text wrapping works with Text Layouts. In the future, you'll be able to wrap a text box that is set to auto width. Unfortunately, I don't have a date for when this'll be done, but I'll keep you posted.

Until then, I have a very ugly, temporary solution for you. :)

textHuggingWrapping.rev

808 KB