How to put pre-formatted text into a card?

[sampab...@googlemail.com]

I have a desideratum, which is to be able to enter left-aligned (aka 'left-to-right' or 'LTR') pre-formatted text into a card. The pre-formatting should apply regardless of the default alignment of text in that card type. My use-case is that I wish to use Mnemosyne to study code snippets, but satisfying my desideratum would potentially also be useful for people studying certain kinds of poetry or other texts in which the alignment of the columns of characters is important. In the case of code snippets, preserving indentation and displaying the snippet in a monospaced typeface is important for two reasons:

1. it enhances comprehensibility of code snippets during revision, and

2. it more closely matches the appearance of code in real computer programs as viewed in text editors or Integrated Development Environments ('IDEs'), therefore improving the applicability of the revision performed in Mnemosyne.

Unfortunately, I have not yet found a way to achieve this desideratum in Mnemosyne 2.3.6.

Here is my progress so far. Suppose I want to have the following text on the front of a card:

def some_fun():
foo = 1
bar = 2
bork = 3

As my first attempt, I simply copy and paste the above snippet into the 'Front' field of a new 'Front and back' card. By default, however, the resulting card front displays each line individually centred, so the desideratum is not satisfied by this attempt.

If I go to Settings > Configure Mnemosyne > Card appearance , then I can set cards of this type to display their contents left-aligned or right-aligned, but neither option preserves the text as entered. For example, left-alignment strips leading whitespace, causing the indentation to be lost. So, the desideratum is not satisfied by this attempt.

So, I tried surrounding the example above with '<code>' and '</code>' tags. Unfortunately, Mnemosyne seems to completely ignore these. So, the desideratum is not satisfied by this attempt.

So, I tried surrounding the example above with '<pre>' and '</pre>' tags instead. If the card type is set to use right or centred alignment (see above), then unfortunately, these tags are effectively ignored by Mnemosyne. So, the desideratum is not satisfied by this attempt.

If the card type is set to use left-alignment, and the code snippet is put into a 'pre' element (see above), then the leading whitespace is preserved. Yay! But now we encounter another problem: the typeface is not monospaced, so the alignment in the snippet is not preserved. (Shouldn't any HTML rendering engine render 'pre' element contents using a monospaced typeface by default?) So, the desideratum is not satisfied by this attempt.

If the card type is set to use left-alignment, and the code snippet is put into a 'pre' element, and the card type is set to use a monospaced typeface (via Settings > Configure Mnemosyne > Card appearance > Select font , then any Front or Back text outside of a 'pre' element becomes monospaced, but unfortunately the contents of the 'pre' element remains in a proportional (i.e. non-monospace) typeface! So, the desideratum is not satisfied by this attempt.

Next, I attempted several ways of making the contents of the 'pre' element monospaced. Sadly, none of them worked. Here is a list of those attempts, which were performed singly (i.e. not combined):

- At the top of the card's 'Front' field, add the line, '<style>pre { font-family: monospace }</style>'.

- Add a 'style' attribute to the opening 'pre' tag: '<pre style="font-family: monospace">'.

- Wrap the 'pre' element in a 'font' element: '<font face="freemono"><pre>...</pre></font>'.

- Wrap the 'pre' element contents in a 'font' element: '<pre><font face="freemono">...</font></pre>'.

Having made so many attempts without success, I fear that either I have missed something terribly obvious, or else Mnemosyne does not currently support my desideratum. I would appreciate advice about which of these two possibilities is in fact the case.

Many thanks!

Sam

[sampab...@googlemail.com]

On Monday, June 6, 2016 at 8:46:07 PM UTC+1, sampab...@googlemail.com wrote:
> I have a desideratum, which is to be able to enter left-aligned (aka 'left-to-right' or 'LTR') pre-formatted text into a card.

Sorry, that was poorly written. Let me try again:

I have a desideratum, which is to be able to enter left-aligned, left-to-right ('LTR') pre-formatted text into a card.

[Peter Bienstman]

Hi,

Basically, the cards are displayed in a full html widget, so anything which is standard html is possible there. However, note that Mnemosyne wraps your html inside a piece of html template with a css taking care of the fonts, alignment, ... you pick globally, e.g.:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body { margin: 0px; height: 100%; width: 100%;}
table.mnem { height: 100%; width: 100%;}
._search { color: red; }
.b { color: #C00000; font-family: "Courier New"; font-weight: light; font-style: oblique; }
.f { color: #C00000; font-family: "Courier New"; font-style: italic; }

</style>
</head>
<body>
<table id="mnem1" class="mnem">
<tr>
<td><span class="f">question</span> </td>
</tr>
</table>
</body>
</html>

I'm not a css/html expert, but hopefully by knowing the 'stuff' Mnemosyne puts around your html, you will be able to obtain what you want.

Cheers,

Peter

> --
> You received this message because you are subscribed to the Google Groups
> "mnemosyne-proj-users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to mnemosyne-proj-u...@googlegroups.com.
> To post to this group, send email to mnemosyne-proj-
> us...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/mnemosyne-proj-users/9201f314-8842-
> 42f1-9e89-2f9efcf66063%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[sampab...@googlemail.com]

Thanks Peter,

On Tuesday, June 7, 2016 at 12:36:54 PM UTC+1, Peter Bienstman wrote:

Basically, the cards are displayed in a full html widget, so anything which is standard html is possible there.

However, note that Mnemosyne wraps your html inside a piece of html template with a css taking care of the fonts, alignment, ... you pick globally

This is good to know, and more or less what I expected. Unfortunately, Mnemosyne is not rendering my HTML/CSS in the way that a conventional browser (e.g. Firefox or Chromium) would. In particular, 'pre' and 'code' elements are not being rendered in the way that Firefox or Chromium would normally render them; and CSS cascading does not appear to be working consistently.

It looks like at least a couple of other Mnemosyne users have encountered similar issues:

https://groups.google.com/forum/#!msg/mnemosyne-proj-users/6knPDJX3sOs/zPRNRNZmvPgJ

https://groups.google.com/forum/#!msg/mnemosyne-proj-users/oD1erQDODr4/O4vrXG5W1_AJ

I understand that Mnemosyne is using Qt for rendering HTML (possibly QtWebKit). I do not have any experience with Qt's approach to rendering HTML/CSS, so perhaps there are some gotchas that I need to figure out.

If I make any progress with this, I will try to remember to update this thread.

Thanks again :)

[Peter Bienstman]

Hi,

 

Also note that I’m upgrading to Qt5 at the moment, which I think uses a different engine, so hopefully that will help too.

 

Cheers,

 

Peter

 

--

You received this message because you are subscribed to the Google Groups "mnemosyne-proj-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mnemosyne-proj-u...@googlegroups.com.

To post to this group, send email to mnemosyne-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mnemosyne-proj-users/3ab3b50f-b12c-4172-8506-0ccbec12dc87%40googlegroups.com.

[sampab...@googlemail.com]

On Tuesday, June 7, 2016 at 5:15:32 PM UTC+1, Peter Bienstman wrote:

Also note that I’m upgrading to Qt5 at the moment, which I think uses a different engine, so hopefully that will help too.

Thanks, good to know!

I've made some progress, and should probably eat some of my earlier words. It seems that part (all?) of the difficulty was due to Qt not finding suitable typefaces. For people on GNU/Linux, something like the following should work:

<pre style="white-space: pre; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;">def example():

var = "foo"

var2 = "bar"</pre>

Using inline style attributes is not very readable, especially with such a large font stack. The ideal thing might be to have a user-configurable stylesheet somewhere, instead of the basic menu options currently present in Mnemosyne. For example, there could be a default style sheet with good cross-platform font stacks (maybe based on Eric Meyer's CSS Reset), and in addition to that, the Settings menu would allow the user to optionally enter raw CSS into a text field to create an override stylesheet. Or perhaps this could be done with a plugin.

Anyhow, if I find/create a more elegant solution than the one pasted above, I'll try to remember to update this thread.

Thanks again!