Converting .rtf charts to .html and centering them on the web.

[Foxofjapan]

Greetings from Japan,

I make a lot of charts in .rtf and then convert to .html for upload to my website.

One problem I have is with centering. For example on the url below, notice that everything is attached to the left side.

https://www.jiadep.org/resources/Chart-Shikei.html

I would like to be able to center the smaller chart, "Metrics."

I don't know if this is even a NIsus issue..? Any advice?

--Michael

[phspaelti]

Hello Michael,
This is a Nisus issue in so far that the results you get depend on the functioning of the HTML generator (which is the "Cocoa HTML Writer". "Cocoa" that sounds Natsukashii )

The results from this are not great, but they're not the worst either (MS Word, ugh). But if you want some more reasonable HTML, especially if you want responsive HTML, you really would have to write it yourself. Some people have tried to write macros that might give better results for certain things.

But actually I do have a question. You want to "center the smaller chart". What is center supposed to mean here? Do you mean center in the view port? My screen is fairly wide and in that case the small table would end up well to the right of the table above it.
Perhaps you want to center it relative to the table above? That would be a more complex undertaking.

The mechanism HTML would have for centering a table would be using <div>s with positioning attributes. That is you would need to strategicaly wrap sections of your document with <div> tags (I'm talking about the HTML output here), and then add CSS to place the divs relative to each other in the way desired. CSS is a science (or maybe an art). It's great stuff. But if you have never done it before, getting things to appear where you want it will involve a steep learning curve.

[adryan]

G'day, Michael, Philip et al

This is not a Nisus issue: it is an issue of HTML and CSS.

From what I see, none of your tables is centered.

To center them all, insert the following line of code at the beginning of your style definitions:–

table {margin-left: auto; margin-right: auto}

This line should be placed just beneath the line that reads:–

<style type="text/css">

The tables will then appear a little offset from the text at the top of the page, but this is because that text is not centered either.

Ideally, you would have an HTML document and a CSS document. You would place all that text in a div element in the HTML document and have the CSS document specify how it is to be styled (including horizontal alignment). The CSS document would take care of all your styling, and the whole thing would be much simpler. For example, there is no need to specify the style for each and every table item separately as you have done.

While you can use Nisus Writer Pro for all this, I find BBEdit easier to work with in this particular field of endeavor.

I hope this helps.

Cheers,
Adrian

[phspaelti]

And now in the spirit of TMI:

The way the generator works is roughly as follows.

• It turns the tables into HTML tables (yeah!)
• Then it wraps every paragraph in <p> tags (ugh)
• It gives all the paragraphs a pXX class attribute. It looks like it numbers every paragraph individually. (Yikes!)
• Then it packs the formatting into CSS statements (yeah!)
• Writing a CSS block for each paragraph, no matter how redundant (yuck)
• It doesn't know a heading from a paragraph. It just imitates the appearance (double yuck).
• It packs all the CSS into a <style> tag in the head of the HTML (well what can you expect)

The output is reasonably well organized. So if you know HTML/CSS you could probably modify it, to get the result you want.

[phspaelti]

Writing a CSS block for each paragraph, no matter how redundant (yuck)

Actually this is unfair on my part. It does reuse formatting statements for paragraphs with the same setting.