[Enhancement]: Add Multi-Language Support for Yearly Overview Images in Statistics Section #2164

Closed
opened 2026-04-25 00:04:22 +02:00 by adam · 4 comments
Owner

Originally created by @Heisenberg9469 on GitHub (Aug 9, 2024).

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

would like to propose adding language support for the statistics section, particularly the yearly overview images. Currently, these images are generated in English only. It would be great if they could also be available in other languages, such as German.

Why would this be helpful?

Adding language support for the yearly overview images would make the statistics more accessible and intuitive for non-English speakers. It would enhance the user experience by allowing users to interact with their listening data in their native language, making the platform more relatable and encouraging regular use.

Future Implementation (Screenshot)

I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language.

Audiobookshelf Server Version

2.12.2

Current Implementation (Screenshot)

image
I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language.

Originally created by @Heisenberg9469 on GitHub (Aug 9, 2024). ### Type of Enhancement Web Interface/Frontend ### Describe the Feature/Enhancement would like to propose adding language support for the statistics section, particularly the yearly overview images. Currently, these images are generated in English only. It would be great if they could also be available in other languages, such as German. ### Why would this be helpful? Adding language support for the yearly overview images would make the statistics more accessible and intuitive for non-English speakers. It would enhance the user experience by allowing users to interact with their listening data in their native language, making the platform more relatable and encouraging regular use. ### Future Implementation (Screenshot) I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language. ### Audiobookshelf Server Version 2.12.2 ### Current Implementation (Screenshot) ![image](https://github.com/user-attachments/assets/3966def6-455e-48ab-b6b2-1dae107a22ce) I have attached a screenshot to help visualize the current implementation of the yearly overview images. The feature could potentially work by detecting the language settings of the user’s device or allowing the user to manually select their preferred language for the statistics display. This would then generate the yearly overview images in the chosen language.
adam added the enhancement label 2026-04-25 00:04:22 +02:00
adam closed this issue 2026-04-25 00:04:22 +02:00
Author
Owner

@advplyr commented on GitHub (Aug 9, 2024):

This one is a bit trickier since we are generating an image using HTML canvas with hard-coded pixel values. The translated text could be a lot longer causing overflow.

For anyone that might want to tackle this one there are 4 YearInReview components.
https://github.com/advplyr/audiobookshelf/blob/master/client/components/stats/YearInReview.vue

There may be a better way to generate the image but if we keep with this method I already wrote a function for checking the length of the text and truncating it if it overflows.

https://github.com/advplyr/audiobookshelf/blob/e81b3461b2b6374d2868fd415a7bbb899bd2f837/client/components/stats/YearInReview.vue#L58-L69

@advplyr commented on GitHub (Aug 9, 2024): This one is a bit trickier since we are generating an image using HTML canvas with hard-coded pixel values. The translated text could be a lot longer causing overflow. For anyone that might want to tackle this one there are 4 YearInReview components. https://github.com/advplyr/audiobookshelf/blob/master/client/components/stats/YearInReview.vue There may be a better way to generate the image but if we keep with this method I already wrote a function for checking the length of the text and truncating it if it overflows. https://github.com/advplyr/audiobookshelf/blob/e81b3461b2b6374d2868fd415a7bbb899bd2f837/client/components/stats/YearInReview.vue#L58-L69
Author
Owner

@Vito0912 commented on GitHub (Aug 9, 2024):

Hey @advplyr,
I'm currently working on adding this.
Could we set a limit in Weblate?
Like a soft-limit so translators know that there is not that much of a space?

@nichwall

@Vito0912 commented on GitHub (Aug 9, 2024): Hey @advplyr, I'm currently working on adding this. Could we set a limit in Weblate? Like a soft-limit so translators know that there is not that much of a space? @nichwall
Author
Owner

@nichwall commented on GitHub (Aug 9, 2024):

Like limiting how long the string can be in Weblate? I don't think there's a way to limit it per string. Weblate gives a warning if the source string (in English) and the destination string (in another language) have too big of a difference of character count, but it's not a hard limit.

Part of the problem is also the width of specific characters, so even if both strings are 10 characters long, they will take a different amount of horizontal space.

@nichwall commented on GitHub (Aug 9, 2024): Like limiting how long the string can be in Weblate? I don't think there's a way to limit it per string. Weblate gives a warning if the source string (in English) and the destination string (in another language) have too big of a difference of character count, but it's not a hard limit. Part of the problem is also the width of specific characters, so even if both strings are 10 characters long, they will take a different amount of horizontal space.
Author
Owner

@Heisenberg9469 commented on GitHub (Aug 9, 2024):

I want to say thank you for the really quick response and direct implementation!
These are reasons why I just love the Audiobookshelf project! There is real love in the details.

@Heisenberg9469 commented on GitHub (Aug 9, 2024): I want to say thank you for the really quick response and direct implementation! These are reasons why I just love the Audiobookshelf project! There is real love in the details.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#2164