Formatting text in the editor - help!

[6harps]

As a code dyslexic, I do not understand what is going wrong here, and I can’t find any help in other topics or in the documentation (or maybe I don’t understand it).

It’s about the following text (here a screenshot of the editor and the side-by-side-view), everything looks like I want it to:

And this is how it looks on the live website - the header is not displayed correctly:

Maybe it has to do with how I use <br> and/or <p> and/or "two spaces / paragraph" to get paragraphs and blank lines?

Somehow I haven’t really understood all this yet, when I should take which code at which position or situation…

Maybe someone can explain it to me, Markdown-newbie, in a simple way?

[elixirgraphics]

I believe a divider line is supposed to be 3 dashes in Markdown. As for the header – you can’t put a paragraph tag in a header to start with. It is improper HTML. You could wrap the header in a div if you reallllly need to center your header. The div would be around the whole header though, and not after the ### like you’ve done.

I’m not a Markdown expert by any means. I think our community Markdown leader would probably be @mitchellm though.

[mitchellm]

@6harps Despite what @elixirgraphics writes, I’m not a markdown expert. But let me add some thoughts:

1. the main purpose of markdown is to simplify the process of writing HTML. And it does.
2. at one point in time (e.g. 1990s) web design was typically done by mixing “content” with “style” (which is, by the way, exactly what you’ve done). The big breakthrough was the development of CSS. What this meant was designers could write CSS to explicityly style or format various parts of their content as they desired (e.g. header formatting). This left HTML for content, CSS for formatting. It was a big breakthrough.

One more revolutionary thing about CSS: you wrote your styles once in a special style sheet that the rest of your website would use. This reduced a lot of busy work, duplication, and more. Put simply, it radically simplified the process of developing websites. CSS really should stand for do once, do well.

If you put the 2 points above together what you get now is:

1. use markdown for content (the simplified form of HTML)
2. use CSS for styling (for the entire website, not just one paragraph, or one page)

I’m simplifying and there are exceptions, but hopefully you get the gist. In your case you are going back to the 1990s. The overall thinking behind CSS is “style once, style well”. What does this mean in your situation? It means you really don’t want to be styling your H3 header every time you use an H3 header. That’s a waste of energy and time.

Okay, that’s the big level ideas. In your case I would suggest, for now, just using ### Header 3 Content and nothing else. I’m assuming you done similar things on other posts. So, first, just simplify. The centering of H3s can be done once in your RW project file and then all H3s will be centered. (BTW, if you want only a few H3s to be centered then that’s a different matter, but it’s good practice to be consistent throughout on the styling of various elements like H3, paragraphs, etc.)

… yes, I hear you, “But I want all those H3 headers centered!”. There are ways to do that but that can be a second step. Let us know if you are using Foundry 2 or Foundry 3 … that will make a difference in terms of suggestions for your next steps.

That’s what I’d suggest. If you really really want to make your life more complicated in the long run then you could add some code to center H3. It would be of this format:

<center><h3>H3 Header Content</h3></center>

If you compare what I’ve written just above to what you’ve done you can spot the differences. I’m explicitly telling when to start centering and when to stop centering. Ditto with H3: explicitly telling when to start and stop.

But that’s the quick fix. In the long run you make your life more complicated by doing this … even if it doesn’t seem like it to you right now.

[6harps]

Thank you both @mitchellm and @elixirgraphics for your suggestions and thoughts. I am using Foundry3, and generally I love it. But I am still not familiar with the Markdown styling of text…

Well, of course I want to keep things simple. But I need the possibility to centre certain text parts or headings and left-justify others. Since I (or the client) also publish poetry and the like, I need customised options for text formatting in the Alloy editor.

I have made a workaround now, I have split the text into two embeds, using exactly the same formatting, and everything is displayed correctly, - whoever wants to understand that…!

What irritated me: why do I see a correct result in the editor in the side by side view (see above screenshot1), but it does not appear on the website (screenshot2)?

[elixirgraphics]

It seems like you got lucky that the Alloy editor handled the incorrect formatting. The Editor field uses a slightly different parser that the embeds and posts themselves. No way around this unfortunately.

[6harps]

Thank you for the code <center><h3>H3 Header Content</h3></center> which actually helped me in that particular situation. As I said, I need the option in the editor to individually centre or left-justify text or images. Maybe I’m being too demanding, but I think this is a “basic” feature, like formatting bold or italic, that should perhaps be integrated into the editor somehow? @elixirgraphics What do you think Adam?

[elixirgraphics]

Markdown, which Alloy uses throughout, does not have alignment formatting options. You can read more about it on the Daring Fireball site: Daring Fireball: Markdown Syntax Documentation