Recommendations for Filtering Platform-Specific Help?

Hello Again :slightly_smiling_face:

In the Keyman mobile app, the keyboard “Help link” presents the welcome.htm file. Likewise, the same file is presented for help on desktop platforms and at installation time.

Do the Keyman CSS libraries offer any classes to show/hide platform-specific content? If so, is there an example that someone could direct me to?

Presently, I would append mobile instructions following desktop instructions. Both are pretty lengthy, and I’m afraid a mobile user would give up before scrolling past desktop instructions to get to the mobile help content. Or vice versa if I reversed the order. Then again, the problem increases with tablet-specific details.

thanks!

-Daniel

Hi Daniel,
This topic has come up before on a different thread :

@Marc has responded that it’s on the to-do list for Keyman

In the meantime, I’d suggest a simple table of contents at the top with big friendly buttons.

1 Like

Look at one of the sil_senegal ones such as: https://keyman.com/keyboards/sil_senegal_krx_azerty
It has some kind of tabbed approach to displaying the welcome.htm which you could use for the targets.

1 Like

Internationalization support for Keyman keyboard documentation is on the roadmap for v.19. Support for per-platform documentation is planned as part of that.

Thank you for this, I begain organizing content with a table of contents as per @Matthew_Lee 's recommendation. Then after reviewing the nice example that @Lorna posted I went that direction and discovered the <details> markup that seems to fit the bill great. I think I can demonstrate here:

View keyboard instructions for:

💻 Desktop

These are the desktop instructions.

📱 Mobile (Phone)

These are the mobile instructions.

🔲 Tablet

These are the tablet instructions.

I also learned that there is no official “tablet” emoji, so I’ll need to work on that. Otherwise, I think its a good solution for now.

The expanding tabs are repurposing code from my documentation. I use CSS tricks to show different languages and different platforms. I hadn’t mentioned it earlier because my documentation contains several of those temporary hacks @Marc likes to avoid. :slight_smile: It also requires doubling the <head> element in PHP to use the external stylesheet, which isn’t good web design.

FYI: The downside to this collapsible solution is that it doesn’t print well if you ever need that.

1 Like