Make it easier to generate an image from a map

[ngirard]

I'm aware that the title I'm giving to this report doesn't make it much actionable ; but I'm intending to create more specific reports and associate them to this one.

By "generate an image", I mean any way of producing an image from the canvas of a story map, so this artifact can be used to communicate better about a product and the state of affairs about it.

This is an important need to me, so I dedicated some time to it, faced difficulties, and saw room for improvements ; so perhaps I should first describe the steps I took to achieve the results I needed.

1. Using Firefox, I visit the story map from which I want an image.

2. I wish to print the whole as a pdf, but the default CSS isn't optimized for printing, so as step 2 I apply some specific CSS rules to the page with the help of the developer tools. More on these rules below.

3. I can now hit Ctrl + p, and choose the following settings:

   • print to pdf;
   • set orientation to landscape
   • set the scale to some value by trial & error (the appropriate value depends on the size of the map)
   • choose margins: none

   which produces a pdf file, say Featmap.pdf

4. Now, the pdf file needs to be converted to png, with the right resolution.

5. Then the image must be trimmed to cut out the white space surrounding the map

6. Finally, the resulting file needs to be given a proper name, containing the workspace name and a timestamp.

As you can see, this is far from straightforward -- and I haven't even detailed the steps 2 and 4-6.

I'm personally satisfied with the results I obtained, and I could very well live with this process as it is ; but I think that Featmap would be more valuable if it offered a easier way of generating images from maps.

So, considering the steps I outlined, I can see some room for improvements:

Step 2 would be made easier by allowing to specify a custom stylesheet to a project or to a workspace. This would be useful for other purposes as well, so I'm about to create an issue about it.

Step 3 would be made easier by generating the pdf with the appropriate settings on the server, and then sending the resulting file to the user. I don't know if you'd consider this to be out of scope, so I won't open an issue for it.

In the same way, steps 4-6 could also be performed automatically on the server. For reference, here's the command I use which achieves all 3 steps at once (leveraging convert from ImageMagick):

convert -density 600 -bordercolor white -border 1x1 -trim +repage Featmap.pdf "${workspace_name}"_$(date --iso-8601=minutes | tr -d ':' | sed 's|\+.*$||').png

In any case, the README could gain a section containing guidance on how to produce images, so I think I'll open an issue for that.

Now, I'll hereafter paste the set of rules that allowed me to achieve with better results, and comment on them.
I initially thought I'd submit a pull request, but as you'll see it raises a number of questions.

@media print {
    /* 1. Header */
    header { display: none; }

    /* 2. Very narrow font */
    body { font-family: Axel}
    
    /* 3. Enable hyphenation */
    .flex * {
        hyphens: auto;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* 4. Remove the empty card slots */
    .flex.p-1.w-32.h-16.border.border-dashed.border-gray-200.rounded.items-center.justify-center {
        display: none;
    }

    /* 5. Remove the "Add Persona" buttons */
    button.flex.text-sm.p-1.rounded.font-semibold {
        display: none;
    }
    
    /* 6. Remove the "Add release" slot */
    .flex.p-2.text-xs {
        display: none;
    }
    
    /* 7. Remove the title + buttons */
    .flex.flex-row.p-2 {
        display: none;
    }
    
    /* 8. Make the cards narrower and taller */
    .w-32 {
        width: 5.5rem; /* 8rem */
    }
    .h-16 {
        height: 7rem; /* 4rem */
    }

}

As you can see, there are all constrained by a @media print selector, which leaves the normal output untouched.
You might want to add such selector to Featmap's CSS, and choose to adopt some of the rules I came up with.

Rule 1 is questionable, because it removes the title of the map from the output. I chose to do so because my main map is very large so I'm missing vertical real estate, but ideally (in an hypothetical future version of Featmap) the choice would be offered to the user.

Rule 2 did help, but the Axel font is licensed, so some narrow font would need to be found within the free fonts.

Rules 3 enable hyphenation, which helped a lot. I'd even suggest enabling it all the time, so I think I'll open an issue for that.

Now, with rules 4 to 8, I ran into a problem with Featmap's CSS.
Let's take rule 4 as an example.
What I want as a user, is to override the appearance of the empty card slots. This would usually be possible by finding the relevant semantic CSS class, then adding new rules to that class.
Unfortunately, there are no semantic CSS classes in the code, there are only utility classes from the TailWind framework.
I'm hereby not criticizing the choice of TailWind nor I'm critisizing the use of utility classes. I'm convinced they were beneficial to you, as an application developer.
What I think are missing is a set of semantic classes that would allow user-level customization. Even empty classes would suffice.
I thus intend to create an issue for this, probably tomorrow.

[amborle]

Thank you so much for your insightful input!

It's definitely on my radar to add png/pdf export. However, being able to add custom CSS is something I would rather avoid.

[ngirard]

It's definitely on my radar to add png/pdf export

That's good to hear !
I guess there are opportunities to save the html canvas to an image directly, which would be more straightforward than using the client-side method I came up with.

[ImaCrea]

Hello @ngirard thanks for the helpful insight here !

I'm trying to add your css but still I can't really extract the full map. Mine is very very long, I have like 30 or 40 stories.

And it would be very helpful to print that all so to stick on the wall. I'm trying with screenshot tools but all I found scroll only vertically :/

If you have any idea to help, that'd be amazing :)