search

hochschule-darmstadt / openartbrowser

Exploring the world of arts using open data
http://openartbrowser.org/
MIT License
40 stars 10 forks source link

Add angular i18n functionality #9

Closed mlmoravek closed 4 years ago

mlmoravek commented 4 years ago

Is your feature request related to a problem? Please describe. I can't speak english. I want to visit the website in my native language.

Why do you want this feature? What goals should be achieved Translate the website in mutli languages. Show static labels and content in different languages.

Describe the solution you'd like Implementing the angular i18n feature. Change all static labels by the i18n functionality.
Implement different content fetches for each language. Specify the language for content fetching for each language build.

Describe acceptance criteria All labels are translated by i18n.
You can add some new translation file to translate the website in a new language.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Translate all static labels by an cloud translation provider at runtime. https://medium.com/@DenysVuika/simple-i18n-support-for-your-angular-apps-6138a47eb2a9 https://github.com/ngx-translate/core

What effects does your proposed solution have Please describe what effects and consequences your proposed solution has on other parts of the code and on the future development

All static labels should set by i18n. The database should provide data in mutliple languages.

Additional context https://angular.io/guide/i18n

mlmoravek commented 4 years ago

Add translation for dynamic labels for:

=> Add translations for any language in the translation file. Get the value dynamic by runtime.

mlmoravek commented 4 years ago

Impess, About and Data Protection page not translated just now.

mlmoravek commented 4 years ago

To create a tranlated xlf file i use the tool TinyTranlator: https://martinroob.github.io/tiny-translator/en

User Manual can be find in the Wiki: https://github.com/martinroob/tiny-translator

mlmoravek commented 4 years ago

A bug appear by translating labels in other languages. The size of the label field is set to a max of 'col-md-3', so that sometimes the label will be gone under the value field.

image

This can be solved by set the labels in a table with dynamic with for the first column.

mlmoravek commented 4 years ago

Added wiki documentation how to add a new label and how to add a new whole language.

BernhardHumm commented 4 years ago

Ich kann diesen Text nicht verstehen.

Viele Grüße

       Bernhard Humm

Von: Xcaver [mailto:notifications@github.com] Gesendet: Sonntag, 3. November 2019 13:12 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Some bug appear by translating in other languages. The size of the label field is set static, so the label will be gone under the value field.

https://user-images.githubusercontent.com/25961416/68084824-26439680-fe3b-11e9-96ce-c61b68ceb414.png

This can be solved by set the labels in a table with dynamic with for the first column.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS6S22DHWJZ2W4W4PZ3QR25X7A5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC5RBZQ#issuecomment-549130470 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHS24U2VJWZJUCRI5ZP3QR25X7ANCNFSM4JHH3RCA .

BernhardHumm commented 4 years ago

Es soll doch nichts automatisch übersetzt werden.

Sie können natürlich zum Anlegen der Übersetzungen ein Übersetzungsprogramm verwenden, aber die Übersetzungen sollen statisch abgelegt und qualitätsgesichert werden.

Viele Grüße

       Bernhard Humm

Prof. Dr. Bernhard Humm

Geschäftsführender Direktor, Institut für angewandte Informatik Darmstadt (aiDa)

Vorsitzender Promotionsausschuss, Promotionszentrum Angewandte Informatik

h_da Hochschule Darmstadt - University of Applied Sciences, fbi Fachbereich Informatik

Schöfferstr. 8b, D-64295 Darmstadt

Tel: +49 6151 16 38494, Fax: +49 6151 16 38935, Home Office: +49 6031 6714726

mailto:bernhard.humm@h-da.de bernhard.humm@h-da.de, https://fbi.h-da.de/personen/personenseiten/bernhard-humm/

Von: Xcaver [mailto:notifications@github.com] Gesendet: Sonntag, 3. November 2019 13:08 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

To create a tranlated xlf file i use the tool TinyTranlator: https://martinroob.github.io/tiny-translator/en

User Manual can be find in the Wiki: https://github.com/martinroob/tiny-translator

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS3KMZVBCRUJA55K6A3QR25JBA5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC5Q7NY#issuecomment-549130167 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHS3TA23TMGNX6X4VPXDQR25JBANCNFSM4JHH3RCA .

BernhardHumm commented 4 years ago

Impressum und Datenschutzerklärung bitte nicht übersetzen, da juristische Texte und für Deutschland gültig. Lediglich in der Überschrift in allen Sprachen anzeigen, dass dieser Text in deutsch ist.

Viele Grüße

       Bernhard Humm

Prof. Dr. Bernhard Humm

Geschäftsführender Direktor, Institut für angewandte Informatik Darmstadt (aiDa)

Vorsitzender Promotionsausschuss, Promotionszentrum Angewandte Informatik

h_da Hochschule Darmstadt - University of Applied Sciences, fbi Fachbereich Informatik

Schöfferstr. 8b, D-64295 Darmstadt

Tel: +49 6151 16 38494, Fax: +49 6151 16 38935, Home Office: +49 6031 6714726

mailto:bernhard.humm@h-da.de bernhard.humm@h-da.de, https://fbi.h-da.de/personen/personenseiten/bernhard-humm/

Von: Xcaver [mailto:notifications@github.com] Gesendet: Sonntag, 3. November 2019 12:19 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Impess, About and Data Protection page not translated just now.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS3FYYR3JDT6U6UNOH3QR2XTFA5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC5QD4I#issuecomment-549126641 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHSYCERQQZCDAO3KVHNLQR2XTFANCNFSM4JHH3RCA .

BernhardHumm commented 4 years ago

Nein, Labels nicht dynamisch zur Laufzeit übersetzen.

QS!

Viele Grüße

       Bernhard Humm

Prof. Dr. Bernhard Humm

Geschäftsführender Direktor, Institut für angewandte Informatik Darmstadt (aiDa)

Vorsitzender Promotionsausschuss, Promotionszentrum Angewandte Informatik

h_da Hochschule Darmstadt - University of Applied Sciences, fbi Fachbereich Informatik

Schöfferstr. 8b, D-64295 Darmstadt

Tel: +49 6151 16 38494, Fax: +49 6151 16 38935, Home Office: +49 6031 6714726

mailto:bernhard.humm@h-da.de bernhard.humm@h-da.de, https://fbi.h-da.de/personen/personenseiten/bernhard-humm/

Von: Xcaver [mailto:notifications@github.com] Gesendet: Sonntag, 3. November 2019 11:37 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Add translation for dynamic labels like Search Placeholder. => Add translations for any language in the translation file. Get the value dynamic by runtime.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS4FSLBJFZV5TJDFIRDQR2SV7A5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEC5PM3A#issuecomment-549123692 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHSZZ642Y3LHBW7EZITTQR2SV7ANCNFSM4JHH3RCA .

jschurse commented 4 years ago

Some bug appear by translating in other languages. The size of the label field is set static, so the label will be gone under the value field.

image

This can be solved by set the labels in a table with dynamic with for the first column.

It seems like the overlapping labels come from this styling directive

.info[_ngcontent-lrl-c11] {
    margin-left: -2em;
}

which moves the details 2em to the left and thus over the labels.

Without this styling directive it would be displayed like this: image

mlmoravek commented 4 years ago

It seems like the overlapping labels come from this styling directive

.info[_ngcontent-lrl-c11] {
    margin-left: -2em;
}

Ohh yeah, but with a width from 1100px there is always some overlapping. And this problem will also occur if some other language has a very long word for an label.

image

One raw has always col-md-3 for the label and col-md-9 for the content. Maybe the label field must be wider, or that's the ideal case for a table, isn´t it?

mlmoravek commented 4 years ago

Es soll doch nichts automatisch übersetzt werden. Sie können natürlich zum Anlegen der Übersetzungen ein Übersetzungsprogramm verwenden, aber die Übersetzungen sollen statisch abgelegt und qualitätsgesichert werden.

This isn´t an automatic translation. All translated values will be stored in xlf files. But these files are quite hard to read, so there is an tool to make is easier to create an xlf file in a nother language. These xlf files will be stored in the project.

mlmoravek commented 4 years ago

Impressum und Datenschutzerklärung bitte nicht übersetzen, da juristische Texte und für Deutschland gültig. Lediglich in der Überschrift in allen Sprachen anzeigen, dass dieser Text in deutsch ist.

Okey, what about the 'About' page?

mlmoravek commented 4 years ago

Nein, Labels nicht dynamisch zur Laufzeit übersetzen.

Not translating the value by runtime, only dynamic fetching the translated value by runtime. Today the different placeholder will be exchanged during the runtime too...

  /** String value binding the placeholder in the searchbar */
  placeholderText: string;

  /** Array of all placeholder values */
  placeholderArray: string[] = [
    'Search for something...',
    'Try "Mona Lisa"',
    'Try "Vincent van Gogh"',
    'Try "Renaissance"',
  ];

 ngAfterViewInit() {
    this.placeholderText = this.placeholderArray[0];
    const inv = interval(8000);
    inv.pipe(takeUntil(this.ngUnsubscribe)).subscribe((val) => this.changePlaceholdertext());
    this.cdRef.detectChanges();
  }

  /** Change the text inside the placeholder */
  public changePlaceholdertext() {
    ++this.counter;
    if (this.counter === this.placeholderArray.length) {
      this.counter = 0;
    }
    this.placeholderText = this.placeholderArray[this.counter];
  }
BernhardHumm commented 4 years ago

No, currently no translation service like Google translate or deepL is being called at runtime (and this should not be done)

Viele Grüße

       Bernhard Humm

Von: Xcaver [mailto:notifications@github.com] Gesendet: Montag, 4. November 2019 18:43 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Humm, Bernhard, Prof. Dr. bernhard.humm@h-da.de; Comment comment@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Nein, Labels nicht dynamisch zur Laufzeit übersetzen. Not translating the value by runtime, only dynamic fetching the translated value by runtime. Today the different placeholder will be exchanged during the runtime too...

/* String value binding the placeholder in the searchbar /

placeholderText: string;

/* Array of all placeholder values /

placeholderArray: string[] = [

'Search for something...',

'Try "Mona Lisa"',

'Try "Vincent van Gogh"',

'Try "Renaissance"',

];

ngAfterViewInit() {

this.placeholderText = this.placeholderArray[0];

const inv = interval(8000);

inv.pipe(takeUntil(this.ngUnsubscribe)).subscribe((val) => this.changePlaceholdertext());

this.cdRef.detectChanges();

}

/* Change the text inside the placeholder /

public changePlaceholdertext() {

++this.counter;

if (this.counter === this.placeholderArray.length) {

  this.counter = 0;

}

this.placeholderText = this.placeholderArray[this.counter];

}

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS6TPFA5A7CNSVUTD73QSBNJVA5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDADG5I#issuecomment-549466997 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHS6KLV4YPOKMH3GYKIDQSBNJVANCNFSM4JHH3RCA .

BernhardHumm commented 4 years ago

I propose we leave the about page in English for the time being and translate it later if there is time (prio C)

Viele Grüße

       Bernhard Humm

Von: Xcaver [mailto:notifications@github.com] Gesendet: Montag, 4. November 2019 18:35 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Humm, Bernhard, Prof. Dr. bernhard.humm@h-da.de; Comment comment@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Impressum und Datenschutzerklärung bitte nicht übersetzen, da juristische Texte und für Deutschland gültig. Lediglich in der Überschrift in allen Sprachen anzeigen, dass dieser Text in deutsch ist.

Okey, what about the 'About' page?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS7ADRLKXCIRPPODVILQSBMK3A5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDACOSA#issuecomment-549463880 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHS7JGPDG5SUZAROZTSTQSBMK3ANCNFSM4JHH3RCA .

BernhardHumm commented 4 years ago

OK, perfect

Viele Grüße

       Bernhard Humm

Von: Xcaver [mailto:notifications@github.com] Gesendet: Montag, 4. November 2019 18:33 An: hochschule-darmstadt/openartbrowser openartbrowser@noreply.github.com Cc: Humm, Bernhard, Prof. Dr. bernhard.humm@h-da.de; Comment comment@noreply.github.com Betreff: Re: [hochschule-darmstadt/openartbrowser] Add angular i18n functionality (#9)

Es soll doch nichts automatisch übersetzt werden. Sie können natürlich zum Anlegen der Übersetzungen ein Übersetzungsprogramm verwenden, aber die Übersetzungen sollen statisch abgelegt und qualitätsgesichert werden.

This isn´t an automatic translation. All translated values will be stored in xlf files. But these files are quite hard to read, so there is an tool to make is easier to create an xlf file on a nother language. These xlf files will be stored in the project.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/hochschule-darmstadt/openartbrowser/issues/9?email_source=notifications&email_token=ABYWHS6F5O572IPOXQ7QF43QSBMDNA5CNFSM4JHH3RCKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDACISY#issuecomment-549463115 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ABYWHSYI2L26NFEJL5P2KE3QSBMDNANCNFSM4JHH3RCA .

mlmoravek commented 4 years ago

It is quite complex to translate properties with multiple text values, like it is used here:

  /** Array of all placeholder values */
  placeholderArray: string[] = [
    'Search for something...',
    'Try "Mona Lisa"',
    'Try "Vincent van Gogh"',
    'Try "Renaissance"',
  ];

There is no proper way to use translation strings outside a template:
https://github.com/angular/angular/issues/11405

However, translating properties also can't use ICU expressions: https://github.com/angular/angular/issues/21615

istthabel commented 4 years ago

The category labels (artist, movement, etc.) on the suggestion images on the home page are not yet translated. (See image) categoryTranslationMissing

Do we want to leave this for later?

mlmoravek commented 4 years ago

The category labels (artist, movement, etc.) on the suggestion images on the home page are not yet translated. Do we want to leave this for later?

No they should be translated, i just forgot them... Is done now.