Shared section on front and back

Anki Card Design
1

I want to write some html in my card template that is used differently on the front and back side.

So ideally it would be like

SharedSection1:

This is the shared content.

Front:

This is the top of the front side.

{{SharedSection1}}

This is the bottom of the front side.

Back:

This is the top of the back side.

{{SharedSection1}}

This is the bottom of the back side.

Of course I could put it in a field, but that means repeating the content for every card, which isn’t very nice.

What are my options?

Do I need to know Html
2

Just don’t use {{FrontSide}} and copy the front template to the back then modify it.

2 Likes
3

The right solution I think is for Anki to support shared template snippets {{SnippetA}}, {{SnippetB}} etc but for now here’s a hack:

Front:

<div class="front">

Here is the top of the front.

  <div class="shared-content">
    Here is the shared content.
  </div>

Here is the bottom of the front.
</div>

Back:

<div class="back">
Here is the top of the back.

{{FrontSide}}

Here is the bottom of the back.
</div>

Styling:

.back .front, 
.back .front * {
	visibility: hidden;
}

.back .front .shared-content, 
.back .front .shared-content * {
	visibility: visible;
}
4

If you want to go that route then you probably should use this instead

Front:

<div class="hidden-content">
Here is the top of the front.
</div>
  
Here is the shared content.
  
<div class="hidden-content">
Here is the bottom of the front.
</div>

Back:

Here is the top of the back.

<div class="back">{{FrontSide}}</div>

Here is the bottom of the back.

Styling:

.back .hidden-content {
    display: none;
}

Or you can use custom tags like <hidden></hidden> if writing <div class="hidden-content"> is too much for you.

4 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.