Add tool for generating border images

[bertfrees]

The idea is to eventually make it available as a server-side tool hosted on daisy.org, but for now a polyfill is required to resolve the special border-image URLs.

Preview

Being able to easily generate the source image for creating a border of braille characters is very convenient because the way the best practices document currently recommends creating borders is terribly complex (see the issue Do something about "magic numbers" in CSS examples).

The one issue I can see with this it that we currently don't allow remote resources.

[mattgarrish]

I guess this won't work until the scripts are merged, right? All I get is an empty css example box in the preview and locally.

[bertfrees]

Yes, sorry, I tested it locally by replacing

script.src = "https://daisy.github.io/ebraille/best-practices/styling/handleBorderImageURLs.js";

with

script.src = new URL("handleBorderImageURLs.js", document.baseURI).href;

[bertfrees]

I was talking about the "Validate with alternative CSS" buttons. But now I noticed that the CSS source code is actually missing. Hum... I have no idea how that happened.

[bertfrees]

I can't explain why, but after I committed two files that I forgot to commit, it seems to work.

[mattgarrish]

Ya, I couldn't figure out if the example css was disappearing because some scripts were running on the file but not others. It might be easier to merge and then do a final check that everything is okay.

[bertfrees]

@mattgarrish I went ahead and resolved this conversation. The empty css example box issue is gone, right?

[bertfrees]

This wasn't resolved yet. It seems like highlightjs is messing with the code blocks within details elements. I don't understand what is happening. For now my workaround is to not mark up these code blocks with <pre><code>. @mattgarrish Can you think of a way to fix this decently?

[wfree-aph]

@bertfrees Apologies for my ignorance but I'm not understanding how this works. It seems like this feature would require someone using an eBraille file to have access to the internet. Is that true? It also seems like a feature that would make support on reading systems more complicated. I can understand why you're looking for a different approach than what we have without this feature but I'm just intimidated by the implications of what you're suggesting.

Edit: It also seems like something we should discuss with the Working Group before adding. The implications seem far-ranging.

[bertfrees]

It seems like this feature would require someone using an eBraille file to have access to the internet.

Yes, the way it is currently presented in the examples, it absolutely requires internet access. But nevertheless I think it would be better to recommend using the border-image approach for borders. I can see two solutions:

• The author uses the DAISY service to generate the images and includes it in the eBraille file (manually, or it could be an authoring tool feature).
• The author creates an eBraille file that uses remote resources, and then a preprocessing tool automatically downloads the resources, puts them inside the file, and updates the remote references.

Edit:

• The third solution is to create a CSS extension. We could provide the JavaScript library for reading system implementors to use.

[bertfrees]

It also seems like a feature that would make support on reading systems more complicated. I can understand why you're looking for a different approach than what we have without this feature but I'm just intimidated by the implications of what you're suggesting.

Apart from the remote resource issue, I don't see why this would be more complicated for the reading system. What makes you say that?

Edit: to be clear, we are talking about border-image vs. the combination of border/padding/margin, right?

[bertfrees]

I can see two solutions

A third solution is to create a CSS extension. We could provide the JavaScript library for reading system implementors to use.

[wfree-aph]

I can see two solutions

A third solution is to create a CSS extension. We could provide the JavaScript library for reading system implementors to use.

Would it be possible for us to discuss these solutions? A meeting with @bertfrees, @mattgarrish, and me would help me understand the implications here. Right now, I feel like I'm still nervous about the implications of each and if I understood the possibilities better, it would help me know what you're thinking.

[bertfrees]

Sure, I'm available for a meeting.

[bertfrees]

Changes requested:

• Don't recommend using the remote URLs. Instead, explain how to use the image generator tool to generate and download an image, store it inside the eBraille publication, and reference it from the CSS.
• Mention that the ::before/::after approach may be used as an alternative to the border-image approach, as long as there are no left and right borders.
• For completeness sake, also still mention the border-width/padding/margin approach, but keep it for last.
• To get a good overview, divide the examples into three subsections.

[bertfrees]

@wfree-aph I updated the document. Could you please read through it to check if you can spot any other issues?

[wfree-aph]

Everything looks fine to me. Thanks for making these changes!