How to support horizontal overflow?

[jeaye]

Hi! I'm trying to render a window of syntax highlighted text and I'm running into a problem where text is squashed if the lines are too long to fit in the window. I would like to have the equivalent of overflow: hidden instead. Here is a simple repro:

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <ftxui/screen/string.hpp>

int main()
{
  using namespace ftxui;

  auto content = hbox({
    text("this "),
    text("will "),
    text("end up "),
    text("being longer "),
    text("than "),
    text("the window "),
    text("so "),
    text("it should overflow "),
    text("rather than squishing "),
    text("the other lines "),
    text("all text should be readable "),
    text("up until the cutoff for the overflow"),
  });
  auto document = window(text("title"), content);
  document = document | size(WIDTH, LESS_THAN, 80);
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  std::cout << screen.ToString();
  return 0;
}

Here's how it looks:

I've been digging through the flex support, flexbox configs, issues, discussions, and didn't find anything related to overflow: hidden type behavior. Is this possible?

Need the separate tokens

I know that I can get what I want, in this simple example, if I just use one text element:

  auto content = hbox({
    text("this will end up being longer than the window so it should overflow "
         "rather than squishing the other lines all of the text should be readable "
         "up until the cutoff for the overflow"),
  });

It looks like this:

However, having a bunch of text elements is the real world scenario, since each of them represents a token of syntax which is colored differently.

[ArthurSonzogni]

Hi @jeaye,

For this particular example, maybe you can wrap the content into a xframe? This way, the elements won't be constrained on the width.

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <ftxui/screen/string.hpp>

int main()
{
  using namespace ftxui;

  auto content = hbox({
    text("this "),
    text("will "),
    text("end up "),
    text("being longer "),
    text("than "),
    text("the window "),
    text("so "),
    text("it should overflow "),
    text("rather than squishing "),
    text("the other lines "),
    text("all text should be readable "),
    text("up until the cutoff for the overflow"),
  });
  content |= xframe;
  auto document = window(text("title"), content);
  document = document | size(WIDTH, LESS_THAN, 80);
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  std::cout << screen.ToString();
  return 0;
}

Output:

╭title───────────────────────────────────────────────────────────────────────────╮                        
│this will end up being longer than the window so it should overflow rather than │                        
╰────────────────────────────────────────────────────────────────────────────────╯       

[ArthurSonzogni]

You are welcome!

Is there a way which I can programmatically "scroll"

Yes, you can tag a specific element with focus to make the xframe to scroll the element into the view.

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <ftxui/screen/string.hpp>

int main()
{
  using namespace ftxui;

  auto content = hbox({
    text("this "),
    text("will "),
    text("end up "),
    text("being longer "),
    text("than "),
    text("the window "),
    text("so "),
    text("it should overflow "),
    text("rather than squishing "),
    text("the other lines "),
    text("all text should be readable "),
    text("up until the cutoff for the overflow") | focus,
  });
  content |= xframe;
  auto document = window(text("title"), content);
  document = document | size(WIDTH, LESS_THAN, 80);
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  std::cout << screen.ToString();
  return 0;
}

╭title───────────────────────────────────────────────────────────────────────────╮                        
│the other lines all text should be readable up until the cutoff for the overflow│                        
╰────────────────────────────────────────────────────────────────────────────────╯

[jeaye]

Incredible. So, in my setup, for showing highlighted code snippets, I have a window which has a vbox of lines. Each line is an hbox of the line number, a separator, and then the line contents. If I want to focus on column 150 for the whole window, would I need to find the appropriate text token for that column on each line? Given that tokens can be different sizes, I imagine focusing them on each line may result in things not quite lining up.

Quick example:

#include <ftxui/dom/elements.hpp>
#include <ftxui/screen/screen.hpp>
#include <ftxui/screen/string.hpp>

int main()
{
  using namespace ftxui;

  auto first_line = hbox({
                      text("this "),
                      text("will "),
                      text("end up "),
                      text("being longer "),
                      text("than "),
                      text("the window "),
                      text("so "),
                      text("it should overflow "),
                      text("rather than squishing "),
                      text("the other lines "),
                      text("all text should be readable "),
                      text("up until the cutoff for the overflow") | focus,
                    })
    | xframe;
  auto second_line = hbox({
                       text("these "),
                       text("are "),
                       text("different words "),
                       text("on the second line "),
                       text("but "),
                       text("must also "),
                       text("be scrolled "),
                       text("along with every other line "),
                       text("rather than them "),
                       text("getting out "),
                       text("of sync "),
                     })
    | xframe;
  auto document = window(text("title"), vbox({ first_line, second_line }));
  document = document | size(WIDTH, LESS_THAN, 80);
  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);
  std::cout << screen.ToString();
  return 0;
}

The output is:

╭title───────────────────────────────────────────────────────────────────────────╮
│the other lines all text should be readable up until the cutoff for the overflow│
│these are different words on the second line but must also be scrolled along wit│
╰────────────────────────────────────────────────────────────────────────────────╯

If there isn't a good way to scroll the whole window, or ensure that every line scrolls the exact same amount, that's ok. I can do away with the window and just rely on the terminal's normal wrapping to handle long lines. Just trying to see how fancy I can get. 🙂

[jeaye]

Alright, following up. I opted to move away from the window, since there were also some concerns about the right border affecting the resizing of terminals. I opted for a more table-style layout, following bat.

Pretty pleased with it, so I'll mark this as resolved. Thanks so much for the support!

[ArthurSonzogni]

I think you can use a single frame for the whole thing and a single focus. You would have a single scrollable area and the focused élément within the view.

[jeaye]

I think you can use a single frame for the whole thing and a single focus. You would have a single scrollable area and the focused élément within the view.

Oh, that's very simple. Thanks for following up! Now that I've moved to a table-style layout, which support wrapping, I'll likely keep this. This discussion led me to learn about frames and focusing, though, neither of which I had seen before in ftxui. Much appreciated! 😃