Better split of personal info data into 2 lines

[danieltomasz]

Currently, when I added field in my adress the personal info splitted into 2 lines. What dosn't working is that the split doesn't work as expected. Instead of moving whole item into new line, the icon stay in the first line but the content move to new one.

generated with this code

#let personalInfo = (
      adress: "1234 Elm Street, Fictionville, ST 12345",
        phone: "+32 (555) 123-4567",
  email: "testUser12345@gmail.com ",
  github: "testUser12345",
  linkedin: "testUser12345",
  //gitlab: "mintyfrankie",
  homepage: "testUser12345.me",
  //orcid: "0000-0000-0000-0000",
  //researchgate: "John-Doe",
)

I would expected that the github icon will go int second line. Also I try force new line by hand with "\" but it created error inside this typst environment.

[danieltomasz]

You might replace my custom "adress" with "extraInfo" to the same effect

[danieltomasz]

I solved my problem with a combination of adding additional empty condition containing linebreak() and hardcoding specific numbers of lines where to hide hBar() in the template.typ, but I wonder if more general solution is possible

[danieltomasz]

One simple general enhacement that might almost solve my problem would be use of non-breaking space ~ between fontawesome icon and the text after

[mintyfrankie]

Hi @danieltomasz thanks for opening up this issue. Can you provide the code snippet and/or the screenshot for the ~ you've mentioned? The effect is indeed not ideal, I will see what I can do.

[danieltomasz]

I by support of ~ I meant this https://github.com/typst/typst/issues/1538 My current workaround doesn't use ~, it is uglier but kinda works, In the template.typ I just introduced dummy item breakline for manually adding linebreak(justify: false) as part of text, and I reset the n counter to remove the hbar from the next item that starts new line, in the metadata.typ I am using it by adding breakline: "dummy" in a specific place in defining personalInfo

#let makeHeaderInfo() = {
  let personalInfoIcons = (
    phone: fa-phone(),
    adress: fa-home(),
    email: fa-envelope(),
    linkedin: fa-linkedin(),
    homepage: fa-pager(),
    github: fa-square-github(),
    gitlab: fa-gitlab(),
    orcid: fa-orcid(),
    researchgate: fa-researchgate(),
    extraInfo: "",
    breakline: "",
  )
  let n = 1
  for (k, v) in personalInfo {
      if v != "" {
        // Adds hBar
        if n != 1  {
            if k != "breakline" {
          hBar()
            }
        }
      // Adds icons
      personalInfoIcons.at(k) + h(5pt)
      // Adds hyperlinks
      if k == "email" {
        link("mailto:" + v)[#v]
      } else if k == "linkedin" {
        link("https://www.linkedin.com/in/" + v)[#v]
      } else if k == "github" {
        link("https://github.com/" + v)[#v]
      } else if k == "gitlab" {
        link("https://gitlab.com/" + v)[#v]
      } else if k == "homepage" {
        link("https://" + v)[#v]
      } else if k == "orcid" {
        link("https://orcid.org/" + v)[#v]
      } else if k == "researchgate" {
        link("https://www.researchgate.net/profile/" + v)[#v]
      } else if k == "breakline" {
        linebreak(justify: false)
        n = 0
      } else {
        v
      }
    }
    n = n + 1
  }
}

When I wanted to replace personalInfoIcons.at(k) + h(5pt) by personalInfoIcons.at(k) + space.nobreak (~ is a shorthand for that) I got error, so stopped with proceding this way

[mintyfrankie]

Hi, a new commit is patched on both the example repo and the template repo, feel free to have a try.

Basically, it was resolved by wrapping an element of personalInfo with box() function in the template; it forces it to stay in the same line.

A tiny (but dirty) trick is also added: add a key of linebreak with whatever value in personalInfo will create a forced linebreak.

I am closing this issue now but feel free to raise another one should you encounter other issues.