Cornell Notes Work on Paper and in TiddlyWiki

#6

I actually use this for my meeting notes, however I found it’s simpler to use grid with fr units.

you can actually ask chatgpt to create a simple cornel notes layout using grid layout and html / css

Here is what I use :grinning_face_with_smiling_eyes:

$__jmh_itemTemplate_cornell-notes.tid (2.0 KB)

It doesn’t place the cues along the same line as the notes body, but In practice I would use <<cornell header>> and <<cornell-anchor>> to quickly make shortcuts to where I am making a note of, ie

<<cornell-anchor "blah blah">>: Lines 1-4 probably needs to be apart of the monthly survey

Though, I do like what others have done where you have a <cues> tag for making the text appear in the aside column better than what I’ve thrown together. (I’ve also found @@highlighting text@@ to be handy.)

3 Likes
#7

Thank you @Scott_Sauyet and others here. Except for a few cosmetic changes I like this and want to include it as an option for notes and tasks in the next release of the Memory Keeper.

#8

Great! I probably won’t find any time this weekend, but sometime soon, I will try to make this more robust.

1 Like
#9

Is it just enough to create a tiddler that follows the general format?

image
image726×455 26 KB

This puts “cues” and “summary” in fields, and the main body in the text.

1 Like
#10

From what I gather, I think the cues are supposed to be in line with the part of the notes you take, which was something my design kinda failed at.

#11

Hmm. I’m skeptical that Obsidian is actually doing that. That is, I think they formatted the page with two columns that look nice together, but the items in the left column might get out of sync if you resized the columns, font-size, etc. But I’d have to follow up on the Obsidian plugin to know for sure.

For the left column to match the right, there has to be some mechanism for pairing or anchoring. For TW, I’m thinking of a series of cue/notes. You add a new set with a button. Sort of like a double-fielded Streams.

Or you could format the text as a series of nested divs, with the inner one floating off to the column on the left.

#12

Right, but the cue should probably annotate a certain bit of the main content without assuming that all bits are annotated.

However, that’s not really tricky. My solution was just to intersperse them, with the cue tag coming just before its associated main content. This way, no particular main content has to have an associated cue, but it can. The cue is simply floated left into the large left margin of the main content.

The biggest disadvantage I see of this approach is that the column holding the cues cannot be easily styled. There is no actual left-column element to target. I can’t find a way to use a border for it either, although I haven’t struggled particularly hard to do so; maybe it’s still possible. That would let us at least add a background color.

#13

If you look at the Obsidian example, there’s just a blank space to the left. So, it doesn’t need to be formatted because it’s … blank. So if you have a tiddler structure that leaves a blank on the left, then you could float the text over the blank area. I think.

So, the structure you see in the finished product isn’t what you see as you work (if I understand his write-up). Instead it’s put together with a series of special call-outs, which are kind of equivalent to our rubber-stamp snippets.

Another learning point – he’s selling the kit you need to produce this kind of output. There is a lot more commercialism in the Obsidian world. For instance, there’s people attempting to sell video tutorials for hundreds $$$

#14

In my example above i used a table to have an empty left column and a macro to float left a cue and or display the cue in the text as well.

  • the cues were nicely aligned.
  • only if more than one appears in the same position they overlapped. Someone with stronger css skills may be able to correct this.

This idea is not simply a cornell note thing but emulating placing notes in a margin on paper but remaining aligned with movable text when digital.

  • I belive its a simple mater of solving a small technical issue or mechanisium to add a feature that emulates something done on paper since paper was invented.
#15

a workaround (maybe not as nice as the original ) but without adding fields so context plugin still works, I created one additional editor button, which puts highlighted characters in a new table, with two columns,

|selected text|!|

and the cursor after the exclamation point, so you can add your pesonal notes /comments. the notes will have a grey background.

|!selected text| |

is also an option cursor before space in 2nd column, then selected text grey, note text is left aligned.

(as a result all columns will have different sizes )

#16

Seeing this resurrected reminded me that I never went back to see if I could style the cues column.

I found I can do so, fairly minimally, as a border.

sample-cornell-note.json (2.7 KB)

We could easily add a UI button for the <cue> element if desired.

3 Likes
#17

Note though that my solution has a major restriction. If the cue content is taller than the main content between the cues, we’re going to have extremely ugly overlapping cues. I just asked a question on StackOverflow about why my attempted remedy failed. I’d ask any strong CSS users here if they have a moment to review it and see if they have an answer. But until I find out how, this is an important restriction.

#18

Another update. By switching to a custom widget instead of a custom HTML element, I was able to add the markup necessary so that I didn’t have to do the CSS float clearly in the awkward way I was trying.

cornell-note.json (9.0 KB)

The first sample shows what I would expect to be the most likely scenario, where the cues are significantly shorter than the text they’re annotating. The second one shows what happens when a cue is longer than that content; note that the following main text moves down to stay aligned with the cue. But the cue does not retain its block mode. The third sample shows that the cue’s block mode can be restored with an initial blank line.

It’s not perfect—and I may open another topic to ask if the <$slot>-Widget can automatically apply block mode—but it’s not bad either.

I have no interest in trying to figure out proper configuration fields (colors, columns, etc.), and turn this into a plugin. But if this is useful to you, go ahead and use it.

1 Like
Floating notes next to content
#19

Ciao Mohammad

I am aware of what “Cornell Notes” are.

TBH, ì don’t think they are anything special (apart from the constraints).

Why am a I writing this?

Ultimately I think it would be better to pursue BASIC STRATEGIES TW enables.

IF we had our own more TW-FRIENDLY-LINGO of strategies I believe it would get easier.

Just a comment, TT

#20

of course I like the philosophy behind Cornell notes! BUT yes, how we can use the philosophy and implement it using TW basic strategies?

#21

Right.

So, first, the only thing needed is to give CASES.

So, for instance …

  1. – I need a wiki that I can change everyday to reflect my changes (body-work; nutritionist; golf scorer)

  2. – I need a wiki to index my menus as we advance Korma Recipes in Texas.

3 – SO, rather than defer, what is step one?

TT

#22

Hello Scott,

Thanks for sharing this.

It reminds me that back in July I have adapted the discussed elements to enable the use of Cornell notes without using macros or widget, just <cl-cue>...</cl-cue> marking and css.

Following your examples with long cues, I have upgraded the css and use a </cl-break> to handle long cues.

Also note that the css also:

  • handles a long cue at the end without overlapping the summary
  • displays cues as inline text when the note is note tagged Cornell

Since this version may be an alternative for users who have not yet upgraded to TW 5.3 versions, I share the css here with some examples.
CornellNotes.json (13.7 KB)

BR,

Eskha

1 Like
#23

This is nice. It certainly looks better than mine! (Of course mine was almost intentionally ugly. I just wanted to focus on layout and make it obvious; regardless, I’m not particularly good at making sites look pretty.) I had thought that I could skip the headers, since it would be in a dedicated tiddler. But seeing yours makes me realize that we still want the internal header; we might transclude multiple Cornell Notes into a single tiddler.

The thing I don’t like is the cl-break requirement. I spent a fair bit of work and some fruitless research trying to build mine just with CSS, but I concluded that I simply needed a separate element. Thus my version, with a custom widget, was born. It turns out pretty simple. I prefer that to requiring the user to include markup specifically for those times when the cue is too long, or just to do it on all of them, because they don’t know how it might display.

Still, if I find time, I may combine your prettier styling with my custom widget.

#24

I confirm that I went down this rabbit hole to find a css solution working without having to use the cl-break. Your solution is indeed adressing better this point and I think the way to go for anyone with a TiddlyWiki 5.3.x version.

#25

On revisiting this thread I am impressed with solutions above so far, however I have started to see this in a new light.

Clearly Cornell Notes originated in paper forms, and I have long sought to make software as easy to use and annotate as paper and it still falls short. Although the methods here come close.

However as I am “want to do”, I tried to look at this more generally, trying to avoid my own prejudices introduced by the by the original concept.

It seems to me when you boil it down this is about introducing cues to text, or cues for which you later add text.

  • Making the cues appear along side the text to the left is the “Cornell notes” way but it is only one of many.
  • So too me I would see value in creating a generic cue mechanism not unlike @Scott_Sauyet has already done, then allowing a user to select from a number of different representations of that same information. Cues can be linked to a inline part of the text, word, sentence or paragraph.
    • So they can be reduced to tooltip, or expanded to a modal, or viewed in the left column (as in Cornell Notes) and any new creative ways.
    • This is starting to look like other solutions in tiddlywiki and HTML such as footnotes, contents and anchors, so there will be “prior art”.

Let us assume we can move forward with a generic Que mechanism that can present the same relationships in various ways, including aligned with the text, the next design consideration is how best to allow the author of such content to enter the content indicate cues.

  • In considering this let us not reduce the possibilities of including macros, links and transclusions in our content.
  • Consider also another tiddler transcluding the notes, listing only the que’s or only the content without que’s.
  • Can the que be linked more than serially, Like in @Scott_Sauyet sample notes but also to a word or phrase?
  • Could we draw a line from a queue to its underlined text in the Cornell view?

So when I look at the content in @Scott_Sauyet sample notes I think the way it looks could be simplified further.

I already have some ideas, but I do not want to “prejudice future possibilities” but urge the community to consider a more generic solution.

1 Like