Answer giveaway "Flag - Country" cards

[ukanuk]

Some flags include the name of the country/continent/etc written on it, for example with Nicaragua, El Salvador, and Paraguay. When reviewing on my smartphone in bed at night (bad habit, I know...), I can clearly read the country name on the front side of the card. I would prefer to recognize the flag by its colors, layout, and symbols, but whenever I get the "Flag - Country" card for Nicaragua, my eye is immediately drawn to the text, and I can read the answer with zero effort.

See my proposed solution below. For affected country notes it modifies the Flag field with a second SVG image and some hidden html. To the "Flag - Country" card type, it adds one class to the existing image div and adds three styles . If someone has a cleaner solution, I'd love to hear it!

Proposed solution, using Nicaragua as the example:

Create new SVG for problematic flag
To obfuscate "Nicaragua" and "Central America", I used the Inkscape effect "Filters > Distort > Roughen" menu. My modified file is only 0.1KB larger according to Windows Explorer.
Before:

After:

Modify Flag field in note:

<div class="hidden-field-note">Do not edit this field directly. Instead, edit its HTML (hotkey is Ctrl+Shift+X).</div>
<img id="flag-regular" src="ug-flag-nicaragua.svg">
<img id="flag-blurred" src="ug-flag-nicaragua-blurred.svg">

"Flag - Country" card type: Add "blurred" class to flag div on front template

<div class="image blurred" style="">{{Flag}}</div>

"Flag - Country" card type: Add more styling

/* For "Flag-Country" cards on countries like Nicaragua where country name is on the flag */
.hidden-field-note                           { display: none; }
.image:not(.blurred) #flag-blurred { display: none; }
.image.blurred          #flag-regular  { display: none; }

[axelboc]

That's a brilliant idea! Another note that comes to mind that could benefit from this is Guam.

The solution you propose is quite nice. I'm not sure about the exact type of blur/noise, but that's a detail. The downside is that it means having two images for the same flag and inconsistent HTML in the note's Flag field. I wonder if we could solve this with a single image and without touching the content of the note. Let's see... How about this:

1. In the front side of the "Flag - Country" template, add an HTML tag after the flag:

<div class="image">
    {{Flag}}
    <div class="blur"></div>
</div>

2. In the deck's CSS, target Nicaragua's flag image specifically and style the element that follows it (the one with class blur) so it appears on top of the text "NICARAGUA" and blurs it out. Something in the lines of:

.image {
  position: relative;
}

/* Blur out country name on Nicaragua's flag */
img[src="ug-flag-nicaragua.svg"] + .blur {
  position: absolute;
  /* width, height, top, left, transform, etc. as needed and with relative units */
  filter: blur(0.5em);
}

Since .blur is only present on the front side of the template, it will only blur the flag on the front of the card. This solution complexifies the CSS a bit, since each flag needs its own declaration block, but it keeps the content clean. It might be a bit challenging to position the blur element correctly, though, especially on small devices, where the flag shrinks to fit the screen.

[ukanuk]

I agree clean note fields are more important than clean CSS. I originally thought of a blurring CSS element as you're suggesting, but couldn't find any resources on implementing a CSS-only ring blur for Nicaragua's flag, without using inline SVG. This is the reason I originally didn't consider using a CSS-only effect. If someone can implement it in some elegant way, then that would be great! (Rectangular blurs don't work well on Nicaragua's flag since there's identifying text circling the entire coat of arms, and using multiple rectangles could get really messy).

However, here's another idea I just thought of! It avoids custom HTML in the note field, just having the two flag images copy-pasted like normal but in a particular order. Note that as shown here, the maps are still working but it's going to hide any second map images someone might add. If going forward with this solution, I'd prevent future confusion by adding the flag class to flag divs on all templates, and adjusting the CSS to operate only on divs with both .image and .flag.

Modify Flag field in note (this is what you get if you copy-paste two images)

<img src="ug-flag-nicaragua.svg"><img src="ug-flag-nicaragua-blur.svg">

"Flag - Country" card type: Add more styling

/* For "Flag-Country" cards, blur country/continent names on front */
/* Assume Flag field has two images, first image is regular and last image is blurred */
.image > img {
  display: none;
}
.image:not(.blur) > img:first-child {
  display: inline;
}
.image.blur > img:last-child {
  display: inline;
}

"Flag - Country" card type: Add "blur" class to flag div on front template

<div class="image blur">{{Flag}}</div>

Comparison of blur effects

I also like the idea of a separate flag image because IMO the plain CSS blur looks bad. Custom CSS filters are apparently possible, but I'm not sure what platforms they'd work on if any.

CSS Gaussian Blur (created with image editor to approximate the CSS Gaussian blur):

Inkscape "roughen" effect with Fractal noise with settings 40/40/1/1/40:

Inkscape Gaussian blur on just letters (notice the palm tree isn't blurred)

Original

New Field Solution

Another even simpler solution is modifying the note type with a new field, "BlurredFlag". We'd need no custom CSS, but probably that would force a major rev change which isn't ideal. This would be card front template HTML:

  <div class="image">
    {{#BlurredFlag}}{{BlurredFlag}}{{/BlurredFlag}}
    {{^BlurredFlag}}{{Flag}}{{/BlurredFlag}}
  </div>

Template-only Media Solution (a reminder for myself why this is bad)

Finally, we could potentially remove/replace an original flag with a blurred version with some combination of the CSS ::before selector with background-image: url("ug-flag-nicaragua-blur.svg");, background-size: cover;, content: url("ug-flag-nicaragua-blur.svg"); }, and so on. But then there's the issue of including media for the deck which is only in the card template, not in any cards, which I think is even worse. I'm just writing this paragraph to remind myself not to try this, as I just spent an hour thinking about it before remembering that template-only media is really bad because the user has to specifically import/delete the media from the system folder.

[ohare93]

❤️ to all of you! Whatever the implementation, I am entirely for this being fixed 💯 👍

[ukanuk]

I'll work on pull requests to first add flag and map classes to the card templates, then to add the CSS to show first/last flags when two are present, then start adding blurred flag images to the notes. I do have some programming experience, but have never contributed with PRs or CrowdAnki so it might take me a couple free evenings/weekends to make it happen.

If/when the deck gets a major rev, I would recommend changing to use a second note field for the blurred flag, as that will be cleaner and much easier for people to understand when looking at card templates.

[axelboc]

Sorry, forgot to reply!

1. I quite like Inkscape's Gaussian blur. Compared to the fractal noise effect, I feel like it makes it clearer that the text is obfuscated on purpose, if you know what I mean.
2. Let's go for having the two images in the Flag field. You're right, it's cleaner than to hack a blurred element on top. We'll reconsider adding another field in the next major revision.
3. I reckon there's no need to add flag and map classes for the moment. If you place the blurred image first and add classes image--front and image--back to the templates, you could have something like this in the CSS:

   .image--front > img[src*="-blur"] + img { display: none; }
   .image--back > img[src*="-blur"] { display: none; }

Thanks and good luck!

[horwitz]

If this is going to happen could we please:

1. have an alternate deck that doesn't have these warped flags and
2. on the warped flags include some note (even a consistent symbol (say, in the corner)) that makes it clear that the reader isn't actually looking at a country's flag, but a warped version of it?

[axelboc]

@horwitz, are you referring to the fractal noise effect that @ukanuk first suggested? If so, I have the same concern about it as you.

What do you think of the more classic blur effect as presented in #220 (comment) (third image)?

[horwitz]

@axelboc: sorry I wasn't clearer—I meant any effect that changes the flag in any way. I don't particularly like the blurring at all—though I certainly understand the motivation (and would believe if I'm the minority here!)

If what's presented on the front of the card isn't actually an image of the flag of anywhere (but merely a blurred or roughened or warped (or any (non-identity) transformation) version that's close to the flag of somewhere), I'd really like to have it be made clear that the flag has been modified.

[ohare93]

If this is going to happen could we please:

1. have an alternate deck that doesn't have these warped flags and
2. on the warped flags include some note (even a consistent symbol (say, in the corner)) that makes it clear that the reader isn't actually looking at a country's flag, but a warped version of it?

@horwitz Are either of those really necessary? The blurred flag is only going to show in the front side of the card, with the full normal flag appearing on the back. No one will be confused as to what the real flag looks like. It will only be the text itself that is blurred/warped anyways, not the whole flag that is changed. Lastly, this will only be done to the few flags with the name of the country on them (3?), the rest will be untouched.

[ukanuk]

@horwitz, I am also unsure what disadvantage you see in obscuring the text on the front of Flag>Country. It's effectively obscured when the flag is sufficiently small like in the emoji 🇬🇺, 🇳🇮, 🇵🇾, and 🇸🇻. I want to be able to recognize all those flags even when I'm not close enough to the flag to read the text. (EDIT: those flag emoji only appear on my Android 10 phone, not my Win10 computer -- I've added hyperlinks to a website with emoji images, but anyway the main point is a small flag ought to stay identifiable even when text is too small)

Regardless, I think an alternate deck is overkill since using unmodified flags everywhere is a simple change in the note styling. Rather than styling Flag>Country cards to use the obfuscated flag on front, you'd change the styling to match the back of the card which shows the original flag.

[ukanuk]

@axelboc said

1. I quite like Inkscape's Gaussian blur. Compared to the fractal noise effect, I feel like it makes it clearer that the text is obfuscated on purpose, if you know what I mean.

Sounds good, I agree blur is a more obvious modification than roughen.

3. I reckon there's no need to add flag and map classes for the moment. If you place the blurred image first and add classes image--front and image--back to the templates, you could have something like this in the CSS:

   .image--front > img[src*="-blur"] + img { display: none; }
   .image--back > img[src*="-blur"] { display: none; }

Good idea on using the src attribute selector! Using it with :not() allows the regular/blurred image to be in either order.

Would it be more correct to use an image--blur class rather than image--front and image--back classes? It appears you're following BEM convention which I've never used before, but it appears you're using the BEM Two Dashes Style which says modifier names follow a double-dash. And if a modifier defines an "appearance, state, or behavior", then I feel "blurred" is more correct for this modifier than "front"/"rear". If I'm missing anything, please correct and educate me! I don't mind doing the PR with either method.

Combining these two changes we get this styling:

/* Hide blurred image(s) by default */
.image > img[src*="-blur"] { display: none; }

/* When requested, hide unblurred image(s) and show blurred image(s) */ 
.image.image--blur > img[src*="-blur"] { display: inline; }
.image.image--blur > img:not([src*="-blur"]) { display: none; }

Or alternately:

/* Hide blurred image(s) by default */
.image:not(.image--blur) > img[src*="-blur"] { display: none; }

/* When requested, hide unblurred image(s) and leave blurred image(s) visible */ 
.image--blur > img:not([src*="-blur"]) { display: none; }

[axelboc]

I think I need to clarify my reasoning, sorry. Let me go back a step. 😄

I'm working off the solution you suggested in one of your comments, which consists of adding classes at the template level to keep the content of the fields as light as possible (i.e. two img tags with no classes). We agree that this solution is best, right?

The CSS you suggested in your earlier comment is the following:

/* For "Flag-Country" cards, blur country/continent names on front */
/* Assume Flag field has two images, first image is regular and last image is blurred */
.image > img {
  display: none;
}
.image:not(.blur) > img:first-child {
  display: inline;
}
.image.blur > img:last-child {
  display: inline;
}

I had three issues with it:

1. Applying display: none then reverting to display: inline => it would be cleaner to only apply display: none to the relevant images and not touch the others.
2. inline might not be the correct display expected by the styling of image -- I believe it needs block for responsive behaviour. Either way, if the styling of image were to change in the future, we'd have to remember to check that the display applied here would still be compatible. Not great.
3. blur "modifies" the behaviour of image yet the name of the class doesn't say so explicitly. Can it be used with another class, like info ? Can it be used on its own? No clue.
4. blur is not a semantic class name, in the sense that it conveys visual appearance. What you want is a class that says why it does something, not how it does it. Here, it does something because the image appears on the front side of a card as opposed to the back.

So I've suggested the following CSS instead:

.image--front > img[src*="-blur"] + img { display: none; }
.image--back > img[src*="-blur"] { display: none; }

The reasons are as follows:

1. It only targets the relevant images and leaves the others alone.
2. It doesn't re-apply the initial display property needed for the images to keep their responsive behaviour.
3. Thanks to BEM, classes image--front and image--back indicate clearly that they "modify" the image Block. They are neither a Block in their own right nor a child Element of the image Block, and they cannot be used with any other Block.
4. image--front and image--back are semantic class names -- they do not hint to a specific visual appearance. They only indicate that an image behaves differently on the front and on the back of a card.

Technically, this would also work:

.image--front > img + img { display: none; }
.image--back > img[src*="-blur"] { display: none; }

... but I thought specifying the attribute selector in the first rule as well would be more readable/self-documenting, and more future-proof in the unlikely scenario we'd want to have two flag images in a field for a different reason than blurring.

---

I hope this clarifies my reasoning. Does it answer your question regarding BEM?

In your latest comment, I'm confused as to why you suggest using the :not() selector. Wouldn't this only work with custom HTML at the field level rather than at the template level?

[aplaice]

.image--front > img[src*="-blur"] + img { display: none; }
.image--back > img[src*="-blur"] { display: none; }

FWIW, I'm amazed about how much information one can concisely pack into CSS selectors. :) (Unfortunately, github doesn't have an unambiguous "wow" reaction.)

... but I thought specifying the attribute selector in the first rule as well would be more readable/self-documenting, and more future-proof in the unlikely scenario we'd want to have two flag images in a field for a different reason than blurring.

An additional concern is that an end-user might want to add a flag themselves (for instance to have both the "state" and "civil" flags, or both an official and unofficial flag, for some of the dependent territories), and if we didn't have [src*="-blur"] in the first selector, they would start wondering why their pasted image mysteriously vanishes on the front card...

(Your CSS even naturally carries over to having multiple pairs of "blurred" and "unblurred" images, if they're correctly named, thanks to + acting only on the first sibling!)

[ukanuk]

I hope this clarifies my reasoning. Does it answer your question regarding BEM?

Thank you for the detailed reasoning, and I'm fine with --front and --back modifiers. I think --blur is still semantic, like how <input type="password"> semantically defines something that ought to appear hidden. I find both semantic and stylistic (unsemantic) modifiers on BEM intros, with stylistic examples including menu_theme_islands and btn--orange and semantic examples including button--state-success and btn--highlight. You have good reasons for using --front and --back so that's fine with me.

In your latest comment, I'm confused as to why you suggest using the :not() selector. Wouldn't this only work with custom HTML at the field level rather than at the template level?

No, this works with template-level HTML. However if only makes sense to use with with --blur modifier, not --front. If someone added .image--front to map images for use with some common CSS, they'd get regular maps unexpectedly hidden. So here's the example CSS with .image--blur:

/* Hide obfuscated image(s) unless called for */
.image:not(.image--blur) > img[src*="-blur"] { display: none; }

/* If called for, hide original image(s) instead of obfuscated image(s) */ 
.image--blur > img:not([src*="-blur"]) { display: none; }

[axelboc]

Whatever the name of the class, if you modify the front side of the Flag - Country template like so:

{{#Flag}}
  <div class="value value--top">?</div>

  <hr>

  <div class="type">Flag</div>
  <div class="image image--whatever">{{Flag}}</div>
{{/Flag}}

... then selector .image--whatever > img:not([src*="-blur"]) will match every non-blurred flag image, thus hiding them all. Am I missing something?

[ukanuk]

You're absolutely right, I completely forgot about about countries with a single non-blurred img, where we do want to show non-blurred flag images. Sorry about that.

[axelboc]

No worries! Glad we're on the same page. 😃

[ukanuk]

I ran through all the flags in the Anki deck and found 6 flags I think we should definitely obfuscate. We probably ought to obfuscate 3 more flags with text in a non-latin alphabet, and potentially ought to obfuscate another 3 flags in case others are better at noticing details than me (whether through better eyes, displays, or both).

Flags with country name

• Afghanistan (افغانستان meaning 'Afghanistan')
• Bali
• Bolivia
• Brunei (بروني دارالسلام‎ meaning ‘Brunei, the Abode of Peace’)
• Egypt (جمهورية مصر العربية‎ meaning "Arab Republic of Egypt")
• El Salvador
• Guam
• Nicaragua
• Paraguay

Flags with country name, but so small it wouldn't be noticeable without SVG and even then potentially not with anyone's actual Anki review setup

• Costa Rica ("America Central Republica de Costa Rica" on coat of arms)
• Dominican Republic ("República Dominicana" on coat of arms)
• Venezuela ("República Bolivariana de Venezuela" on coat of arms)

I documented every flag with any text, but don't think any of these cause the answer to be given away unfairly. Here they are for reference.

Click to expand

Flags with text besides country name

• Andorra ("Virtus Unita Fortior" meaning "United virtue is stronger")
• Belize ("SUB UMBRA FLOREO", meaning "Under the shade I flourish", although this doesn't appear in the image Anki currently uses)
• Brazil ("Ordem e Progresso" meaning "Order and Progress")
• British Virgin Islands ("Vigilante" meaning "be watchful")
• Canary Islands ("Oceano", could not find meaning)
• Cayman Islands ("He hath founded it upon the seas")
• Equatorial Guinea ("Unidad, Paz, Justicia" meaning "Unity, Peace, Justice")
• Falkland Islands ("Desire the right")
• Guatemala ("Libertad 15 de septiembre de 1821" meaning "Freedom September 15, 1821")
• Iran (ٱلل‍َّٰه meaning "Allah", and the Takbir written in Kufic script along the two bands. Thank you aplaice!)
• Iraq (ٱللَّٰهُ أَكْبَرُ meaning "Allah is greater [than everything]")
• Malta ("For gallantry")
• Melilla ("Non Plus Ultra" meaning "No more beyond", and "Præferre Patriam Liberis Parentem Decet" meaning "It is seemly for a parent to put his fatherland before his children")
• San Marino ("Libertas")
• Saudi Arabia (لَا إِلٰهَ إِلَّا الله مُحَمَّدٌ رَسُولُ الله meaning "There is no God but Allah; Muhammad is the Messenger of Allah")
• Sint Maarten ("Semper pro grediens" meaning "always progressing")
• Somaliland (لا إله إلاَّ الله محمد رسول الله, There is no god except for God, and Muhammad is the messenger of God))
• Spain ("Plus Ultra" meaning "Further Beyond")
• United States Virgin Islands ("VI", abbreviation for "Virgin Islands")

Flags with text besides country name, but so small it wouldn't be noticeable without SVG and even then potentially not with anyone's actual Anki review setup

• Ecuador (♈, ♉, ♊ and ♋️, which are astronomical signs for Aries, Taurus, Gemini and Cancer )
• Haiti ("L'Union fait la force" meaning "Unity Makes Strength")

[axelboc]

It's interesting about Afghanistan, Brunei and Egypt. On one hand, it seems that blurring them would be consistent with our direction of making the deck less westernized. On the other hand, I feel like this concerns the geographical content of the deck more than its internationalization, and I think obfuscating text is an internationalization problem. When (if) we start having translations for languages with non-latin writing systems, then obfuscation of non-latin text could make sense, but for now I don't feel like it would.

[aplaice]

Costa Rica ("America Central Republica de Costa Rica" on coat of arms)
Dominican Republic ("República Dominicana" on coat of arms)
Venezuela ("República Bolivariana de Venezuela" on coat of arms)

All three of these flags are currently converted to PNG, for this deck, so irrespective of how much one zooms in, the name won't be distinguishable, so we don't need to worry about them. Boliva's flag (also in PNG format) is just-about-borderline, but I agree that it's worth blurring.

Flags with text besides country name

This is fascinating! For completeness, there's also Iran's flag, which has a very stylised "Allah" (ٱلل‍َّٰه) in the centre, and apparently the Takbir written in Kufic script along the two bands.

[ukanuk]

@axelboc If the Japanese, Chinese, or Korean flags had 日本, 中国, or 韓國 written on them, I would say they ought to be blurred because I happened to study Japanese in college and can read them just as easily as I can read Guam. Someone who studied Arabic could probably make a similar argument, even if they want to study the deck in English. Regardless, I don't mind waiting to modify such flags until when (if) that becomes a problem.

@aplaice Thank you, I've edited my post above to add your details about Iran! As for the PNG images, I agree.

[horwitz]

@horwitz, I am also unsure what disadvantage you see in obscuring the text on the front of Flag>Country. It's effectively obscured when the flag is sufficiently small like in the emoji 🇬🇺, 🇳🇮, 🇵🇾, and 🇸🇻. I want to be able to recognize all those flags even when I'm not close enough to the flag to read the text. (EDIT: those flag emoji only appear on my Android 10 phone, not my Win10 computer -- I've added hyperlinks to a website with emoji images, but anyway the main point is a small flag ought to stay identifiable even when text is too small)

As for recognizing flags from emoji (e.g., 🇬🇺, 🇳🇮, 🇵🇾, and 🇸🇻): sure, I want that recognition skill—and if that's all I wanted, then these potentially obscured flags would be no worry.

However, obfuscation hurts the ability to answer a question like "What nation's flag includes the text 'Republica de [country name]' on the flag?" (I was asked "What US state's flag includes the phrase 'Battle Born'?" once and didn't know—even though I had studied US flags, the deck I studied had inexact images.)

Regardless, I think an alternate deck is overkill since using unmodified flags everywhere is a simple change in the note styling. Rather than styling Flag>Country cards to use the obfuscated flag on front, you'd change the styling to match the back of the card which shows the original flag.

If a flag-obfuscating change goes into effect and I can undo it locally with a simple one(-ish)-line change, then that's great news—thanks! (And never mind my concern!)

[axelboc]

However, obfuscation hurts the ability to answer a question like "What nation's flag includes the text 'Republica de [country name]' on the flag?"

A bit late to reply now that I've merged the PR, but I just wanted to give you my two cents on this @horwitz. I did share this concern of yours, but I think that it's mitigated by the fact that you do see the real flag on the back, so the deck is not losing any information. In fact, the change from blurred to not blurred might make you realise even more that the flag had its country's name on it! 😄

Closing this issue now since auto-closing didn't work. Thanks @ukanuk and everyone else who participated!