thomas-darling / gulp-translate

Gulp plugin that localizes HTML templates and JSON files by extracting and injecting localizable content.
11 stars 3 forks source link

Syntactic sugar for reduced markup size #5

Closed rs3d closed 7 years ago

rs3d commented 7 years ago

Hi,

I'm currently using your great plugin for multilanguage/multi tenant frontend and experienced two difficulties:

  1. If I want to translate single generic word or currencies in sentences I have to add a tag like $.

Could it be possible to also support a configurable tag like <translate>$</translate> which will get completely replaced to $ respectively etc? This would help to reduce the markup and to solve issues when spans ord divs are styled via css.

  1. If I want to translate attributes like href I can use href.translate. But sometimes I need to translate <a href="mailto:mail@domain.com">mail@domain.com</a>.

My approach end like this <a href.translate href="mailto:mail@domain.com" translate>mail@domain.com</a> with two entries in my language file for mailto:mail@domain.com and mail@domain.com. Do i miss here something? Maybe we can use something like this to address the redundancy : <a mailto.href.translate href="mailto:mail@domain.com" translate>mail@domain.com</a> with only one entry to the language file (without the mailto: prefix).

Thanks you for your beautiful and helpful plugin!

thomas-darling commented 7 years ago

Hi, sorry for the delay.

1

One of the key principles guiding the design of the plugin, is to keep the number of concepts to an absolute minimum, and I'd therefore be reluctant to add such an element - I'll give it some more though, but for now, the closest thing to what you want, would be something like:

<span translate>$</span>

Just for context though, the way we usually handle this particular case is using value converters. Lets say we have an app built using the SPA framework Aurelia, then we can have a custom value converter called currency, which formats the value as a number with decimal and group separators, and adds the currency symbol - it might even do currency conversion if needed:

The price is ${price | currency }

So for example, if the current locale is en-GB, the current currency is British Pounds, and the price value is 1000, then this would be presented as The price is £1,000.00.

We actually use value converters for just about everything related to localization - like pluralization:

We found ${count} ${count | plural: "result" : "results"}

It's an extremely efficient approach to solving a lot of really hard localization problems, including the really insane ones related to grammatical case, prepositions, articles and gender.

2

Regarding your second issue, this is an edge case I don't think we can reasonably support. The vast majority of apps are data driven, and as such, that mail address would come from data and not be baked into the translations in this way - so I don't think we will do anything to simplify that particular use case.

I would however recommend that you consider enabling the option allowDirectAnnotation, as that would at least make it a little bit more compact - that way, you can just write:

<a href.translate="mailto:mail@domain.com" translate>mail@domain.com</a>

You will still have two separate strings though.

rs3d commented 7 years ago

Thanks for your reply!

1

The currency was only a simple /an over simplified example. I had to translate many words, but adding a span or a div often led to issues with some css selectors or js dom manipulations. To circumvent this, a custom tag would help to be make changes less error prune.