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

why table has no border in preview? #1018

Closed
todatamining opened this Issue Sep 9, 2018 · 42 comments

Comments

Projects
None yet
3 participants
@todatamining

todatamining commented Sep 9, 2018

My environment is :
ubuntu 16.4
qownnotes 18.09

I follow the instructions here :https://github.com/pbek/QOwnNotes/blob/develop/src/demonotes/Markdown%20Cheatsheet.md

 | Tables        | Are           | Cool  |
 | ------------- |:-------------:| -----:|
 | col 3 is      | right-aligned | $1600 |
 | col 2 is      | centered      |   $12 |
 | zebra stripes | are neat      |    $1 |

But there is no border in the preview.

snapshot:

https://ibb.co/jxz8h9

Expected behaviour

  table has border

Actual behaviour

  no border

Steps to reproduce

 | Tables        | Are           | Cool  |
 | ------------- |:-------------:| -----:|
 | col 3 is      | right-aligned | $1600 |
 | col 2 is      | centered      |   $12 |
 | zebra stripes | are neat      |    $1 |

then click preview

Output from the debug section in the settings dialog

Relevant log output in the Log panel

@pbek pbek added the question label Sep 9, 2018

@pbek

This comment has been minimized.

Owner

pbek commented Sep 9, 2018

I'm sorry, tables does not support borders in a QTextBrowser, see: http://doc.qt.io/qt-5/richtext-html-subset.html

@DutchPete

This comment has been minimized.

DutchPete commented Nov 11, 2018

I'm sorry, tables does not support borders in a QTextBrowser, see: http://doc.qt.io/qt-5/richtext-html-subset.html

Patrizio, I think we are not on the same page. Your own markdown cheatsheet page shows it:
https://github.com/pbek/QOwnNotes/blob/develop/src/demonotes/Markdown%20Cheatsheet.md

And the table was definitely rendered like that. Now those horizontal and vertical lines do not appear anymore. Surely you cannot close this issue.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 11, 2018

Your own markdown cheatsheet page shows it

what does it show and where are you looking at it?

@pbek

This comment has been minimized.

Owner

pbek commented Nov 11, 2018

And the table was definitely rendered like that.

when and where?

@pbek

This comment has been minimized.

Owner

pbek commented Nov 11, 2018

And don't get me wrong I'd love to have table borders.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 11, 2018

Your own markdown cheatsheet page shows it

what does it show and where are you looking at it?

If you open the page that I provided the link for, scroll down to the "Tables" header, there you will 1st see a table as per the editor pane, then below that a sentence "Colons can be used to align columns.", then below that a table with borders. I am not making up things.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 11, 2018

And the table was definitely rendered like that.

when and where?

When I 1st started using QON in July in a test note I made. If I load that test note now it does not show those borders anymore, of course.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 11, 2018

I'm sorry, tables does not support borders in a QTextBrowser, see: http://doc.qt.io/qt-5/richtext-html-subset.html

With all due respect, a table without borders is not a table.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 11, 2018

If you open the page that I provided the link for, scroll down to the "Tables" header, there you will 1st see a table as per the editor pane, then below that a sentence "Colons can be used to align columns.", then below that a table with borders.

I guess you are viewing the markdown file on Github (with their markdown renderer) in your webbrowser, I' not sure what that has to do with the preview of QOwnNotes...

@DutchPete

This comment has been minimized.

DutchPete commented Nov 12, 2018

I guess you are viewing the markdown file on Github (with their markdown renderer) in your webbrowser, I' not sure what that has to do with the preview of QOwnNotes...

If QOwnNotes has a webpage that is meant to show people how certain things are done and what the results are, then anybody who uses that page may reasonably assume that what is shown on the page is what can be expected from QON. If that is not the right assumption, then there should be a clear, unequivocal comment at the top top of the page that "what you see is NOT what you get", so there are no misunderstandings.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 12, 2018

I'm sorry, GitHub is not owned by me, it is owned by Microsoft. :)

@DutchPete

This comment has been minimized.

DutchPete commented Nov 12, 2018

I'm sorry, GitHub is not owned by me, it is owned by Microsoft. :)

I know that but you don't address my point. You use the Github page to explain certain things to users, so those users will assume that what they see on that page is the way it will be rendered in QON.

If it is NOT rendered in QON like it is shown on the Github page, then there should be a comment at the top of that Github page, otherwise similar issues like this one will keep coming up.

FYI, if a program cannot render tables as tables, that is a show stopper for me.

@pbek pbek added enhancement and removed question labels Nov 12, 2018

@pbek pbek reopened this Nov 12, 2018

pbek added a commit that referenced this issue Nov 12, 2018

@pbek

This comment has been minimized.

Owner

pbek commented Nov 12, 2018

It took quite some effort to make this work, I had to hack both the Hoedown library (for converting markdown to html) and the markdown-it library (because it's installed by many users of QOwnNotes).

18.11.2

  • the preview will now view table borders
    • the script Markdown-it markdown parser now also supports table borders
    • to disable this feature you can use table {border-width: 0;} in the
      Custom note preview styling script

@sanderboom, @codito, this might also be of interest to you

@pbek pbek added this to the 18.11.2 milestone Nov 12, 2018

pbek added a commit that referenced this issue Nov 12, 2018

pbek added a commit that referenced this issue Nov 12, 2018

@DutchPete

This comment has been minimized.

DutchPete commented Nov 12, 2018

Thanks Patrizio. I'll wait for the update to come through so we can see the results of your hard work.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 12, 2018

There now is a new release, could you please test it and report if it works for you?

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

There now is a new release, could you please test it and report if it works for you?

Thanks Patrizio, that's some good work. I have some remarks:

the table in the editor pane consists of pipes and dashes. Normally, even if in the editor the pipes and dashes are not aligned properly because words or values are of differing lengths, the table in preview is rendered properly. In QON it is not - the table in the editor needs to be aligned properly for the table in preview to be rendered properly too.

I have the following in the editor:
Table 1 title = text
Table 1

Table 2 title = text
Table 2

Table 3 title = text
Table 3

There is no gap between the Table title and the table in the editor for all 3 tables, nor in the preview, which is fine. However, in the editor there is a gap between Table 1 and Table 2 title, but in preview there is NO gap. There IS a gap between Table 2 and Table 3 title in the preview, even though in the editor all empty spaces are the same.
I can send you a screenshot if you like. If you do, you'll have to tell me where to send it to.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

@DutchPete I'm sorry, I quite don't grasp what you are talking about, maybe some screenshots would help.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

I can send you a screenshot if you like. If you do, you'll have to tell me where to send it to.

Just post them here.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

I have made a screenshot, saved it as a jpg file, but the webpage "can't process that file".
Please advise.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

Are you sure you created a jpg image? What operating system are you working on? And how did you create the screenshot?

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Are you sure you created a jpg image? What operating system are you working on? And how did you create the screenshot?

Yes it is a jpg image and I am on Windows.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

If it were a JPG image then GitHub would accept it if you are drag and dropping it to the comment edit. So how did you create the jpg image?

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

I created it by making a screenshot and saving it as a jpg file, an option offered by the screenshot program. Now, a jpg is a jpg, AFAIK there are no different types of jpg formats.

I tried both the drag & drop and copy from clipboard, and that's when I got that message in each case. Isn't there an email address I can send the image to?

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

Try https://imgur.com/upload, I would prefer the screenshot publicly available to discuss.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Try https://imgur.com/upload, I would prefer the screenshot publicly available to discuss.
OK, I have uploaded it there.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

You need to share the link with us. 😃

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Here is a link;
https://imgur.com/ceJ7pdJ

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

cej7pdj

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

Ok, great. So what's the issue?

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

The issues is as described earlier this morning. To repeat:

  1. in the preview there should be a gap between Table 1 and the text "2. Markets", just like there is a gap between Table 2 and the text "3. Weather conditions in Nicosia @ 12:00h".

As you can see from the editor in the upper half, there is no reason for that gap not to be there. In other words, what do I need to do to create or delete a gap between a table and the text below it?

  1. As you can see, in the editor the pipes and dashes of Table 3 are not aligned, and despite the fact that that normally does not matter in markdown for the preview, in this case the Table 3 is affected in the preview.
@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

thank you for your feedback

ad 1: The QTextBrowser (http://doc.qt.io/qt-5/qtextbrowser.html) has a lot of glitches with margins, this seems to be one of it. I'm sorry, you could only try to file a Qt bug at https://bugreports.qt.io/secure/Dashboard.jspa

ad 2: The hoedown library doesn't support that, you could try above mentioned script Markdown-it markdown parser

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Thanks for your quick reply Patrizio. I am sorry, I am neither a coder nor a programmer. Filing a bug to a 3rd party will require technical explanations, which I am not capable of.

As for trying out a script, I have no idea what that means/involves/how to do/....

So, if I understand you well, the status of table formation as it now stands is as far as you can take it. Correct?

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

As for trying out a script, I have no idea what that means/involves/how to do/....

In QOwnNotes search for the menu item with the name Script repository in it, there you can install mentioned script to replace the current preview generator.

So, if I understand you well, the status of table formation as it now stands is as far as you can take it. Correct?

possibly

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

In QOwnNotes search for the menu item with the name Script repository in it, there you can install mentioned script to replace the current preview generator.

I installed the script but it makes no difference.
OK, so this issue can now be closed because we have gone as far as possible.
Thanks for your help.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

Did you really try the markdown-it script?

I used:

| Name | Description | age         
| :- |-------------: | :-:
|Mary| She is a nice girl.  | 20
| Jackie Junior | He is a very naughty boy. | 5

The cells were aligned left, right and center.

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Did you really try the markdown-it script?

I assume you mean the script that is QON's default markdown renderer. I did try that, and is why I raised this issue.
Following your previous recommendation, I installed the Markdown-it markdown parser script hoping for improvement, but to no avail.
So in both cases it did not work.

FYI, this is not a big issue for me, I think/hope, because I would always try to get the pipes and dashes lined up in the editor. But sometimes that is not possible. In my opinion this issue should be fixed, but I personally can live with it.

I find the other issue of being able to leave a blank line between a table and the next line of text much more important because presentationally it looks crummy, whereas the pipes/dashes issue can be worked around if one is preparing a presentation.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

screenshot_20181113_163641

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

screenshot_20181113_163802

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

This is in reply to both your screenshots.

1st screenshot: yes, it seems to work for you - misaligned table in editor, aligned table in preview.
2nd screenshot: you seem to have markdown-it markdown parser installed, like me.
So I don't understand why it does not work at my end :-(

From you point of view my end is not important because it does seem to work so other users won't experience this issue.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

ok ;)

@pbek pbek closed this Nov 13, 2018

@DutchPete

This comment has been minimized.

DutchPete commented Nov 13, 2018

Thanks for your help. At least tables have borders now.

@pbek

This comment has been minimized.

Owner

pbek commented Nov 13, 2018

Thank you for your reports and your feedback!

pbek added a commit that referenced this issue Nov 14, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment