Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Figure caption hard to distinguish from normal text #433

Open
phiresky opened this issue Jul 26, 2021 · 4 comments
Open

Figure caption hard to distinguish from normal text #433

phiresky opened this issue Jul 26, 2021 · 4 comments

Comments

@phiresky
Copy link

Example:
image

It's hard to see what's part of the figure and what isn't. I'd suggest the following style additions:

  figure {
    padding: 1ex;
    border: 1px solid gray;
  }
  figcaption {
    font-style: italic;
  }

example:
image

As a comparison, in LaTeX the figure caption is indented to make it more clear and has more space to the text:

image

It would also be possible to do something similar to that with e.g.

figcaption {
margin-left: 5em;
text-indent: -5em;
}

though to make that perfect the HTML would probably have to be changed to a flexbox or a table.

@agitter
Copy link
Member

agitter commented Jul 27, 2021

Modifying the figure display to better distinguish figure captions from text makes sense to me. I prefer the box over the indentation, which adds a fair amount of whitespace.

@vincerubinetti what do you think?

@vincerubinetti
Copy link
Collaborator

From an aesthetic pov, I can't condone the box. You can use that solution for your own manuscript, but I wouldn't make the change to rootstock.

The indent is okay (some whitespace will be necessary to visually distinguish the caption), but to make it align properly we would have to change the html output. The arrow button and "Figure X" elements would have to be in one container, and the figure title and paragraph text in another container. This would involve modifying the fig-nos plugin, the pandoc formatting, and/or the jump-to-first manubot plugin.

A simpler solution would be to just add some horizontal space on both sides, and maybe a little extra on the bottom:

image

figcaption {
  padding: 0 30px 10px 30px;
}

@vincerubinetti
Copy link
Collaborator

If you really wanted a line, you could do this:

figure {
  border-bottom: solid 1px #bdbdbd;
  padding-bottom: 20px;
}

Basically giving the appearance of an <hr> below each figure.

image

@phiresky
Copy link
Author

phiresky commented Aug 3, 2021

the version with padding looks pretty good to me as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants