How to cause empty field inputs to create zero line spaces on the card

Card Design
1

I am trying to create a many purpose deck in Anki using HTML and CSS coding.

I would like to know of a way where I can create many potential fields where any fields that are empty won’t create line spaces or empty table rows on the card.

For example, this is kind of what happens with one approach I am trying. I want a potential for multiple fields in a space, a div or a table cell, and I might start off with coding as follows :

{{field 1}}<br>{{field 2}}<br>{{field 3}}<br>{{field 4}}

The <br> is obviously to place the field outputs on separate lines. The effect I want is minimum space taken up. If only one field has data then I only want data for that field taking up space. As it stands, if {{field 4}} has data, then on the card there will be probably three empty lines preceding the data for {{field 4}} because of the three preceding <br>'s.

Is there any kind of approach to coding that can eliminate unwanted empty lines in the card output? Something along the lines of a line break command t:

<br (if there is no data in the preceding field reference, cause this line break not to occur)>

Or maybe something along the lines of this for tables :

<!----------------------------------->

<table style= "table-layout: fixed;" class= "port" >

<!----------------------------------->

<tr>

<td style= " width: 100vw; font-family: segl; font-size: 2vw; text-align: center; padding: .2vw 4vw .45vw 5vw;" class= "grey45 segl bggrey5 ">{{field 1}}</td>

</tr>

</table>

<!----------------------------------->

WHERE IN THE CODING FOR THE ABOVE TABLE that there is coding that specifies that if {{field 1}} fetches an absence of data for output, that the entire table row does not appear, neither vertical nor horizontal table row lines to represent that row.

I hope I got the idea across.

Any way to achieve this :

no-data-for-field-input>>no-space-taken-up-on-card

: effect?

2

See Conditional Replacement..
So in your case:

{{#FieldName}}
{{FieldName}}<br>
{{/FieldName}}
1 Like
3

Rumo

Thank you for the response. This will be very useful.

I wish I had known about this conditional replacement before. I may go and apply this to all my decks to make them simpler and less cluttered.

Anthony Kranjc