Centering Text *and* Formatting or Footnotes

Using Ghost
1

I would greatly appreciate any help with this problem.

Problem: I cannot figure out how to center text and do Markdown features such as bolding or footnotes.

I can center text within /html and using HTML. I can also center text within /markdown and using HTML.

I can create footnotes within /markdown and using HTML.

Therefore, the solution to centered text with footnotes would seem to be using footnotes within a span of centered text within HTML tags in /markdown.

However, the nifty features of Markdown do not work within spans of text encased within HTML tags.

Markdown card:

<p style="text-align: center;">A piece of centered text[^1]</p>

[^1]: Footnote

Does not work. :confused:

Thank you for your time.

2

When using HTML tags in markdown, you usually have to add a couple of line breaks to tell the renderer that you’re back to writing markdown. Something like this might work:

<center>
    
## Hello, World!
    
</center>
3

Thank you, it sort of worked, or at least I learned something for the workaround.

Entering the line breaks made the footnote function of Markdown work, but the line breaks also made the HTML tags stop working for <p></p>. And yet, the <center></center> tags worked with line breaks so that the text was centered and the footnote worked.

I wondered if <center></center> was the ticket alone, but it destroyed the footnote when I removed the line breaks.

And so it seems that there is only one way to mix HTML functions and Markdown: to use certain HTML tags and use the line breaks. Thank you for that suggestion of line breaks. I hadn’t even considered that.

I do not know much HTML. My knowledge of it dates back to 1999 or so. And so I need to figure which HTML tags work (such as <center></center>) and which HTML tags do not work (such as <p></p>).

1 Like
4

Hold on the “Wowee! Success!” I am still thankful (of course!), but this workaround seems to not work on the default Casper theme on the latest theme and latest Ghost.

This HTML of <center> is deprecated HTML 4 (and so I wonder about various browsers), and it seems to change the font and to shrink it.

I didn’t notice the font change on the editor side. The change is only visible on the visitor side.

So . . . back to square one.

Without text align and without footnotes, my goal seems impossible.

A workaround would only work if Ghost was able to see and process Markdown within <p>...</p> tags—which is something that Ghost cannot yet do.

[Sigh] This may have to wait until after the ActivityPub work is over.

I haven’t yet had a strong need for both. I jury-rigged a centered list of linked things with just HTML. If I needed to use Markdown for footnotes (so, so much easier than footnotes in HTML!), then I would be in trouble.

For short things, I just use the *, †, ‡ and no links for footnotes, as if I were typesetting a book in 1890. It works good enough.

(Writing this all out for the poor soul who comes across this thread via Google in a few months)

5

You could probably fix the font with a little css?

6

Echoing Cathy, if you can share the markdown you tried and the URL where it looks off, that might help

7

You wildly over-estimate my skills. I am aware of code injection for the site and by page, and CSS, but I cannot actually implement them or speak at your level of expertise (either of you).

First Test

<p style="text-align:center!important;">Text^[Footnote]</p>

Text^[Footnote]

This text is centered, but it completely ignores the Markdown.

Second Test

<center>

Text^[Footnote]
</center>

Text[1]

This messes up the font by making it smaller and sans serif

Third Test

<p style="text-align:center!important;">

Text^[Footnote]</p>

Text[2]

This separation makes the Markdown work, but now we lose sight of the HTML for the paragraph to be centered.

Fourth Test

<div style="text-align: center;">

Text^[Footnote]
</div>

Text[3]

This respects the centering and the footnote, but it changes the text into sans serif and small.

  1. Footnote ↩︎

  2. Footnote ↩︎

  3. Footnote ↩︎

8

Centering-w-HTML-Markdown-Ghost
Centering-w-HTML-Markdown-Ghost707Ă—2071 76.2 KB

9

Thank you for your curiosity and help. I am sorry I am not technically savvy enough to have done a better job of helping with examples etc.

EDIT:
An interesting thing I have discovered is that using <p> before anything will negate any Markdown syntax on that line. This also seems to be the case with Append Editor.

But Append Editor removes centering information.

So, it seems that the only workaround for centering text is to write out the content in simpler Markdown for footnotes or links. Then, convert that to HTML with Append Editor. Last, manually look through for <p> and change each to <p style="text-align:center!important;">.

At this point, I have to use so much HTML that the only value in Markdown is in having ^[Footnotes] in the text, and as an intermediate step.

The value of Markdown—its ease of use and prettiness when viewed as is—seems to be irrelevant except for the footnote. Doing that with HTML is much more work and the footnote system of Markdown is like LaTeX; you can move them wherever and the renumbering is automatic. (I just found out that instead of Text[^1] ... [^1]: Footnote, I can just do Text^[Footnote] and all the numbering is automatic. So, yay.)

EDIT 3:
From https://daringfireball.net/projects/markdown/syntax:

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

Span-level HTML tags — e.g. <span>, <cite>, or <del> — can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you’d prefer to use HTML <a> or <img> tags instead of Markdown’s link or image syntax, go right ahead.

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

In other words, it is just impossible to use Markdown syntax within HTML blocks such as <p>. You can use Markdown within spans such as <div>, but Ghost will convert all text—be it HTML or Markdown in origin—as smaller, footnote-sized, and sans serif if you use spans such as <div>.

10

I think you’re looking for something like this?

<div style="text-align: center">

Here's my *markdown* content^[With footnote]

</div>

Note markdown needs to be fully separated from html by blank lines, it won’t work with a blank line on just one side. Also, because the markdown itself creates a <p> element you need to use <div> to apply the styling because nested <p> isn’t valid HTML.

Footnote content itself won’t be centered because that gets rendered outside of the normal markdown content. You can fix that by adding your own style, either by using global/post-level code injection or adding it directly to your markdown content:

<style>.footnotes { display: flex; justify-content: center; }</style>
<div style="text-align: center">

Here's my *markdown* content^[With footnote]

</div>

<style> gets stripped from the in-editor view to avoid it breaking the editor layout/behaviour but if you preview the post it will show the footnotes centered too.

but Ghost will convert all text—be it HTML or Markdown in origin—as smaller, footnote-sized, and sans serif if you use spans such as <div> .

Not quite sure what you mean by that as I can’t reproduce but it sounds like it might be theme-specific. Some themes aren’t set up to correctly style paragraph content that isn’t top-level in the post body.

1 Like
11

It could be theme-specific, yes.

Any use of <div> results in the text becoming small—which I do not want.

The Casper theme transforms all text within <div> into smaller font, as if it is a footnote.

This could be related to how this theme does image captions. As a shortcut, instead of shrinking the text for image captions, Ghost may be lazily just using spans (not blocks) for image captions in HTML and then just styling text within blocks to be small and footnote-sized.

It is a decision that developers made, a decision that has unintended consequences. I want centered text through Markdown, text that is not tiny.

It is impossible to do unless (1) I change the styling for the site so that centered text within spans is not small and (2) I manually write HTML for every single image caption so that the caption and only the caption is small again.

What I want to do is going to involve heavy CSS and HTML or just HTML. I would rather go through the pain of doing a specific thing on one page in HTML all the way.

Changing the styling has too many unintended consequences.

Thank you everyone for giving me the pieces that I needed to explore this further.

I thought I was unable to figure iut a simple trick. Instead, I simply found a shortcoming of Ghost that I cannot easily work around.

Them’s the breaks.

12

Here’s the css you’d need to make the theme apply to paragraphs that are nested in something else, specifically in Casper:

<style>
.gh-content p {
    font-family: var(--gh-font-body, var(--font-serif));
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6em;
}
@media (max-width: 650px) {
  .gh-content p {
        font-size: 1.8rem;
   }
}
</style>

There’s a small risk of changing styling of p tags within cards, but those selectors are SUPER specific, so I think the odds are low, as long as you don’t add any !important to what I have above.

13

Thank you. I will try this later today (New York time).

1 Like