Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

flags without the circle mask #105

Open
cedvdb opened this issue Oct 2, 2023 · 23 comments
Open

flags without the circle mask #105

cedvdb opened this issue Oct 2, 2023 · 23 comments

Comments

@cedvdb
Copy link

cedvdb commented Oct 2, 2023

The circle mask should be removed because some renderers do not play well with it. It would also allow people to play with the border radius more easily.

There is already a PR for that here #51

@kapowaz
Copy link

kapowaz commented Oct 17, 2023

I thought you might like to know that I’ve created a new project based on circle-flags where all the flags are square. There are a number of subtle tweaks that were needed to make them work well at that shape, so it’s not as simple as the PR you linked (which only affects the mask on the existing shapes). Feel free to check it out here.

@waldyrious
Copy link
Collaborator

Nice! Could you share a couple examples of design adjustments you had to make for the flags to work well in the square form factor?

@kapowaz
Copy link

kapowaz commented Oct 17, 2023

Sure! There were quite a few changes I made in the end, as I started going down the rabbit hole of making further and further adjustments, but the main ones that justified making new variants were along these lines:

  • All the flags that use a Union Jack as a canton were redrawn to use a full (quarter-scale) Union Jack
  • Flags with items in the four corners (e.g. Quebec, Sardinia, Georgia) had these items repositioned to be more evenly distributed across the square
  • Some flags (e.g. Seychelles) had angled segments that didn't correspond to how the real flag looked (i.e. rays not originating from the corner etc.)

After I made these changes I also started making a few other ‘improvements’ (more subjective, but I think they’re worth doing) such as adding a middle yellow to help give yellow items on a light background more contrast. As part of my work I turned a large number of the basic templates (tricolours, crosses etc.) into abstract components so as to ensure all similar flags have equal dimensions, and I’ve adjusted several of these to align better to the pixel grid (based on a 16x16 icon size; larger sizes might not directly match, but they suffer less from muddiness than smaller sizes anyway).

What’s your ‘source of truth’ for the icons in circle-flags? Do you use Figma or similar, or are they just edited locally then re-committed to the repo?

@kapowaz
Copy link

kapowaz commented Oct 17, 2023

Here’s a comparison of the two sets of main country flags; by overlaying each set in Difference blending mode you can see where a flag is significantly different to the original other than just outside the circle (i.e. a pure black circle in the middle means they’re essentially identical):

flags-comparison

@waldyrious
Copy link
Collaborator

Awesome work! Thanks for the detailed write-up :)

What’s your ‘source of truth’ for the icons in circle-flags? Do you use Figma or similar, or are they just edited locally then re-committed to the repo?

That's something for @HatScripts to respond :)

Here’s a comparison of the two sets of main country flags; by overlaying each set in Difference blending mode

That's pretty nice! I wish there was a way to mask out the outside-the-circle differences to make it easier to focus on the deliberate changes you made.

One specific question I have is about the flag of Cape Verde, my home country: as described in #1 and #2, the current design in circle-flags actually respects the original flag's proportions; in contrast, the square-flags version places the stars and stripes much lower:

cape verde square flag

What was the reasoning for that?

@kapowaz
Copy link

kapowaz commented Oct 18, 2023

In this particular case I'd have to double check; it may well have been accidental, but I think when I first started implementing this set I was using a set of SVGs that was a little outdated, so I may have ended up duplicating some other issues that existed in circle-flags that were since fixed (for example I was using an outdated version of Mexico's flag with the less detailed crest).

I'll certainly fix this issue with Cabo Verde though!

@waldyrious
Copy link
Collaborator

waldyrious commented Oct 18, 2023

Ah, that makes sense. Indeed the old version of the CV flag in this repo had the same problem (fixed in #1). Thanks for confirming!

Although this raises a separate question: do you have any plans to keep the two projects in sync? It would be great to ensure parity as updates are made in either project.

@kapowaz
Copy link

kapowaz commented Oct 18, 2023

It’s an interesting question. The obvious answer is: ideally, yes, but the reality is it might be harder for me to ensure this happens. This is part of why I ask about the ‘source of truth’ for the circle versions (hopefully @HatScripts can clarify); ideally (imho) there would be a Figma* file for both sets, with whatever common elements can be shared originating in a shared design file, such that changes there are reflected in both sets, whilst also permitting each ‘downstream’ set to maintain its own usage-specific changes.

Where it becomes trickier is I’ve already started making my own customisations to the designs in square-flags which could mean this isn’t possible to achieve, so I’d love to get the views of the maintainers as to whether it makes more sense for the projects to align, or if they should be treated as separate entities.

By the way, I’ve got a PR for updating Cabo Verde, which you can see here if you’re interested. No need to comment if you’re busy, I’ll probably merge it anyway in a few minutes, but you can take a look if you’d like!

*I appreciate there might be some reluctance amongst some members of the OSS community to rely on a commercial tool like Figma to maintain a project like this, but in my opinion since the output files are still editable SVGs, it’s not a complete obstacle. On the flip side, the benefits of using Figma are enormous, since it allows the many shared elements amongst flags to be updated simultaneously.

@kapowaz
Copy link

kapowaz commented Oct 18, 2023

Also since you asked, here’s the same diff image as above but with only the circular changes visible:
square-flags-diff

@waldyrious
Copy link
Collaborator

I’d love to get the views of the maintainers as to whether it makes more sense for the projects to align, or if they should be treated as separate entities.

I don't think it needs to be an all-or-nothing thing: ideally some automated or semi-automated process would be set in place, but even just maintaining communication so that new flags and small edits can be manually ported back and forth would be a better situation than keeping the projects entirely separate.

Also since you asked, here’s the same diff image as above but with only the circular changes visible:

Amazing! That's quite a bit of work indeed. Thanks for sharing!

I would actually suggest adding a selection of the flags whose difference is most evident (perhaps one for each class of similar changes, like the Union Jack repositioning) to the README/home page of the square-flags project, since that would make it clearer why it is a separately-maintained project.

By the way, I’ve got a PR for updating Cabo Verde, which you can kapowaz/square-flags#10 if you’re interested.

Nice, I'll take a look!

@kapowaz
Copy link

kapowaz commented Oct 18, 2023

Good idea; I'll add some more clear examples to the readme and describe what the changes were.

@cedvdb
Copy link
Author

cedvdb commented Oct 18, 2023

I don't see two separate projects by different maintainers being very successful, or different sets of flags on figma, each with their own subtle changes, for that matter. Ideally there would only be only one set of flags which can be automatically converted to circles. The changes made by @kapowaz inside the circle are not initially necessary and increase the workload needed initially. It could be part of a separate PR, but initially those changes are out of scope. Just removing the circle mask is already good enough for most of the flags although a few tweaks are needed here and there.

So my suggestion would be to have either this repo use squared flags and expose circle ones on display (github pages etc) so it does not clashes too much with the name, or have another repository be the source of truth.

@kapowaz
Copy link

kapowaz commented Oct 19, 2023

Ideally there would only be only one set of flags which can be automatically converted to circles

Unfortunately — as I mentioned above — this doesn’t work very well for all flags. A lot of flags will work equally well with a circular or rounded rect mask on top of an initially square flag (tricolours for example), but others have very specific design decisions to suit the circular format which don’t work nearly as well once you remove the mask. Take the Australian flag (or any other flag which features a Union Jack in the ‘canton’ — upper left corner):

A comparison of the Australian flag in both circle-flags and square-flags

This was a large part of the motivation behind creating my set in the first place. Opinions will differ as to whether or not this kind of change matters; I use the example of Australia specifically because I got feedback from an Australian that the original version I came up with (which was much closer to an ‘unmasked’ version of the one from circle-flags) was not nearly recognisable enough, so I wanted to do something better.

Now, as to whether a different project can be ‘successful’ is a different question, since country flag changes aren’t that frequent, and so for the majority of projects that need a flag, they’ll probably get by fine once they have a set that works for them. I’m naturally keen not to cause disharmony with the existing project, and would ideally like there to be a mechanism whereby we can share our efforts to support one another.

@cedvdb
Copy link
Author

cedvdb commented Oct 19, 2023

Gotcha, but :

This library is circle flags, having the ability to change the border radius is warranted. To do so squared flags are needed to hide or show more or less content depending on the border radius. Since the library is circle flags, the circle flags designs are the focal point.

Now turn the problem around: your library is for squared flags, if you change the border radius to be a circle, you won't have the design the circle flag library provides either.

So it's fine if there is two sets of flags but even if this is circle flags with circle flags designs, the mask should be removed to allow for border radius adjustments. If your intended border radius is more or less a square then it would make sense to use the svgs from the square library then.

@kapowaz
Copy link

kapowaz commented Oct 19, 2023

So it's fine if there is two sets of flags but even if this is circle flags with circle flags designs, the mask should be removed to allow for border radius adjustments.

Of course; the square-flags repo isn’t intended to invalidate the issue you raised, but rather to (potentially) solve for the problem of ‘I want square versions of the circle-flags graphics’.

@waldyrious
Copy link
Collaborator

To do so squared flags are needed to hide or show more or less content depending on the border radius.

Ooooh, this actually makes me wonder if we could implement some clever dynamic adaptations with SVG, like what's described here. I'm not sure if it's possible to make SVG attribute/CSS properties depend on a border radius rather than on something more fundamental like width/height of the document, but I thought I'd leave the idea here nevertheless :)

@cedvdb
Copy link
Author

cedvdb commented Apr 5, 2024

Flags may not display on flutter because of the mask in some scenarios ( #105)

@cedvdb
Copy link
Author

cedvdb commented Jul 21, 2024

@waldyrious Friendly ping as this still causes issues. I still think it's fine if the flags don't look quite right when displayed in a square, this is, after all, the circle flags library.

@waldyrious
Copy link
Collaborator

@cedvdb maybe you pinged the wrong person? Just to be clear, what do you expect me to do here?

@cedvdb
Copy link
Author

cedvdb commented Jul 23, 2024

@waldyrious I assumed you were a maintainer of the project. If you are, is the removal of the mask, with the flags unchanged, something that would be accepted ?

@waldyrious
Copy link
Collaborator

I have contributed in the past, but the maintainer is @HatScripts, and he is the one with the final say in these matters :)

@RodXander
Copy link

@HatScripts, any updates on this? This is how it looks right now using the html renderer due to the masks in the SVGs

IMG_6194

@cedvdb
Copy link
Author

cedvdb commented Jul 24, 2024

@RodXander I think it's @HatScripts you meant to ping. I was confused for a sec and waldy is the author of the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants