Tagging translated text correctly (tagging with lang="") - html

A client has asked me to add some polish text to their website, not having much experience in this area, can anyone tell me which of the two 'lang' solutions below is correct (or offer an alternative):-
Tag everything:-
<div lang="pl">
<h2 lang="pl">Najlepszy ruch jaki zrobisz!</h2>
<p lang="pl">Do przyszłych najemców:</p>
<p lang="pl">Tutaj w SPS mamy bogate doświadczenie na rynku najmu i wyszukiwaniu domu, który będzie idealnym miejscem dla przyszłych lokatorów. Dla wielu może to być trudne i stresujące, dlatego my w SPS pomożemy Wam przejść przez pole minowe związane z najmem i uczynić ten proces najprostszym i najszybszym jak to możliwe.</p>
<p lang="pl">Jeśli szukasz nieruchomości obecnie lub w najbliższej przyszłości prosimy o kontakt z naszym doświadczonym , przyjaznym i pomocnym personelem, a my postaramy się pomóc znaleźć Ci idealne miejsce, które jest właśnie dla Ciebie.</p>
<p lang="pl">Więc aby w łatwy sposób wynająć zadzwoń już dziś.</p>
</div>
Just tag the div
<div lang="pl">
<h2>Najlepszy ruch jaki zrobisz!</h2>
<p>Do przyszłych najemców:</p>
<p>Tutaj w SPS mamy bogate doświadczenie na rynku najmu i wyszukiwaniu domu, który będzie idealnym miejscem dla przyszłych lokatorów. Dla wielu może to być trudne i stresujące, dlatego my w SPS pomożemy Wam przejść przez pole minowe związane z najmem i uczynić ten proces najprostszym i najszybszym jak to możliwe.</p>
<p>Jeśli szukasz nieruchomości obecnie lub w najbliższej przyszłości prosimy o kontakt z naszym doświadczonym , przyjaznym i pomocnym personelem, a my postaramy się pomóc znaleźć Ci idealne miejsce, które jest właśnie dla Ciebie.</p>
<p>Więc aby w łatwy sposób wynająć zadzwoń już dziś.</p>
</div>

The latter. You only need to indicate changes in language.
Otherwise you would end up with:
<html lang="en-us">
<head lang="en-us">
<title lang="en-us"> A document written in American English </title>
…

Related

Element arcticle not allowed as child of element main in this context

I have this code and I'm using this HTML validator to check it: https://validator.w3.org
When I've put this code through it, one error that appeared was:
Element arcticle not allowed as child of element main in this context
which I don't really understand.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vuestras mascotas</title>
</head>
<body>
<header>
<nav>
Inicio
Informacion
Formulario
Vuestras mascotas
FAQ
</nav>
</header>
<main>
<h1>Vuestras mascotas</h1>
<arcticle>
<h2>Estas son alguna de vuestras mascotas:</h2>
<section>
<h3>PatoLucas</h3>
<p>Subespecie: Anatino</p>
<p>Hola! Me llamo PatoLucas. Soy un pato de 4 años! Me gusta mucho nadar en la piscina y soy un poco
travieso jijiji. Me encanta graznar a las 05:00am y despertar a mi familia.</p>
<img src="imagenes/pato1.png" alt="PatoLucas" width="250" height="250">
</section>
<section>
<h3>Paquito</h3>
<p>Subespecie: Tardonino</p>
<p>Mi nombre es Paquito. Soy un pato que le encanta viajar en furgoneta con sus dueños. Mi ultima
aventura ha sido recorrernos todo Europa en furgoneta. Sigueme en mi canal de youtube
#paquitoViajerito y se mi nuevo amigo de aventuras.</p>
<img src="imagenes/pato2.png" alt="Paquito" width="250" height="250">
</section>
<section>
<h3>Lazo</h3>
<p>Subespecie: Mergino</p>
<p>Encantada :) me llamo Lazo. Soy una patita de Portugal que le encanta robar lazos. Soy mas bien
tranquilita, y me gusta quedarme en el sofa sentada junto a mi familia. Me gusta mas la comida de
mis dueños que la mia, pero no me suelen dar :(</p>
<img src="imagenes/pato3.png" alt="Lazo" width="250" height="250">
</section>
</arcticle>
</main>
<footer>
<p>© 2021 Tyler de Mier</p>
</footer>
</body>
</html>
Here's the full error message from validator.w3.org:
Error: Element arcticle not allowed as child of element main in this context. (Suppressing further errors from this subtree.)
From line 22, column 9; to line 22, column 18
>↩ <arcticle>↩
Here's line 23:
<main>
<h1>Vuestras mascotas</h1>
<arcticle> <-- Line 23
<h2>Estas son alguna de vuestras mascotas:</h2>
Very simply: "arcticle" isn't a valid HTML element name. It's probably just a typo. Try changing it (and the end tag) to article

Big commerce multi language error of translation stencil theme

I am using stencil theme on my bigcommerce store, the theme URL is this
https://themeforest.net/item/laparis-simple-creative-responsive-bigcommerce-theme-stencil-based/19715248
And here is my store URL: https://salondlamody.com/
I have to translate whole the store to change variable values in en.json file according to my language, and its working fine. but when I reached checkout page the translation not working.
After study this URL: https://stencil.bigcommerce.com/docs/multi-language-checkout
I have to download optimize_checkout files and translate whole the variable values I have added the code to my en.json file.
But it's still not working ...............!
Below is the code of my optimization check out which one I am using my en.json file
"optimized_checkout": {
"address": {
"address_line_1_label": "Ulica i numer domu / mieszkania",
"address_line_1_required_error": "Uzupełnij pierwszą linię adresu",
"address_line_2_label": "Adres c.d.",
"address_line_2_required_error": "Uzupełnij pierwszą linię adresu",
"address_not_recognized_heading": "Nie rozpoznaliśmy Twojego adresu. Prosze sprawdź dane",
"city_label": "Miasto",
"city_required_error": "Podanie Miasta jest wymagane.",
"company_name_label": "Firma",
"company_name_required_error": "Podanie firmy jest wymagane.",
"confirm_address_action": "Kontynuuj",
"confirm_address_text": "Nie możemy znaleźć powiązania z podanym adresem. Proszę potwierdzić adres.",
"country_label": "Kraj",
"country_required_error": "Podanie kraju jest wymagane",
"edit_address_action": "Edytuj adres",
"enter_address_action": "Podaj nowy adres",
"first_name_label": "Imię",
"first_name_required_error": "Podanie imienia jest wymagane",
"last_name_label": "Nazwisko",
"last_name_required_error": "Podanie nazwiska jest wymagane",
"phone_number_label": "Numer teleonu",
"phone_number_required_error": "Podanie numeru teleonu jest wymagane",
"postal_code_label": "Kod pocztowy",
"postal_code_required_error": "Podanie kodu pocztowego jest wymagane",
"select_country_action": "Wybierz kraj",
"select_state_action": "Wybierz województwo",
"state_label": "Województwo/Stan",
"state_required_error": "Województwo jest wymagane."
},
"billing": {
"billing_address_heading": "Adres rozliczeniowy",
"billing_heading": "Faktura",
"save_billing_address_error": "Wystąpił błąd podczas zapisywania adresu rozliczeniowego. Proszę spróbować ponownie.",
"use_shipping_address_label": "Moje dane do aktury są takie same jak adres dostawy."
},
"cart": {
"based_on_currency_text": "Cena na podstawie {total} {code}",
"cart_heading": "Podsumowanie zamówienia",
"digital_item_text": "Produkty wirtualne",
"discount_text": "Zniżka",
"downloads_action": "Przejdź do pobierania",
"edit_cart_action": "Edytuj koszyk",
"estimated_total_text": "Szacowana suma",
"free_text": "Darmowa",
"gift_certificate_text": "Kod podarunkowy",
"handling_text": "Obsługa",
"item_count_text": "{count, plural, one{1 produkt} two {2 produkty} three{3 produkty} four{4 produkty} other{# produktów} }",
"print_action": "Drukuj",
"remove_action": "usuń",
"see_all_action": "Zobacz wszystko",
"see_less_action": "Zwiń",
"shipping_text": "Dostawa",
"show_details_action": "Zobacz szczegóły",
"store_credit_text": "Złotówki z karty podarunkowej",
"subtotal_text": "Podsuma",
"taxes_text": "w tym VAT",
"total_text": "Suma",
"Congratulations!":"Gratulacje!"
},
"common": {
"cancel_action": "Anuluj",
"close_action": "Zamknij",
"continue_action": "Kontynuuj",
"edit_action": "Edytuj",
"error_heading": "Coś poszło nie tak",
"leave_warning": "Czy jesteś pewien, że chcesz wyjść? Możesz utracić wprowadzone dane.",
"loading_text": "Ładowanie",
"ok_action": "Ok",
"optional_text": "Opcjonalnie",
"unavailable_error": "Kasa jest chwilowo niedostępna. Proszę spróbowac później.",
"unavailable_heading": "Kasa jest chwilowo niedostępna"
},
"customer": {
"checkout_as_guest_text": "Zapłacić w kasie jako <strong>Gość</strong>? Będziesz mógł zapisać szczegóły zamówienia aby utworzyć konto później",
"continue_as_guest_action": "Kontynnuj jako gość",
"create_account_action": "Utwórz konto",
"create_account_error": "Wystąpił błąd podczas tworzenia Twojego konta. Proszę spóbuj jeszcze raz.",
"create_account_success": "Twoje konto zostało utowrzone!",
"create_account_text": "Utwórz konto aby szybko składać zamówienia.",
"create_account_to_continue_text": "Nie masz konta? Utwórz konto aby kontynuować.",
"customer_heading": "Klient",
"email_invalid_error": "Adres e-mail musi być aktualny",
"email_label": "Adres e-mail",
"email_required_error": "Adres e-mail jest wymagany",
"forgot_password_action": "Zapomniałeś hasła?",
"guest_customer_text": "Gość",
"login_action": "Zarejestruj teraz",
"login_text": "Posiadasz już konto?",
"password_confirmation_error": "Hasła nie pasują",
"password_confirmation_label": "Potwierdź hasło",
"password_confirmation_required_error": "To pole jest wymagane.",
"password_label": "Hasło",
"password_letter_required_error": "Hasło musi zawierać literę",
"password_minimum_character_label": "Rozróżniana jest wielkość liter",
"password_number_required_error": "Hasło musi zawierać cyrę",
"password_over_maximum_length_error": "Hasło jest za długie",
"password_required_error": "Hasło jest wymagane",
"password_under_minimum_length_error": "Hasło za krótkie",
"returning_customer_text": "Jestem już klientem sklepu",
"sign_in_action": "Zaloguj",
"sign_in_error": "E-mail lub hasło nie pasują.",
"sign_in_throttled_error": "Za dużo prób logowania, prosze zaczekać 10 sekund pomiedzy kolejnymi próbami logowania.",
"sign_out_action": "Wyloguj",
"sign_out_error": "Wystąpił błąd podczas wylogowywania. Prosze spróbuj jeszcze raz.",
"subscribe_to_newsletter_text": "Tak, chcę otrzymywac najnowsze aktualizacje."
},
"payment": {
"amazon_continue_action": "Kontynnuj przez Amazon",
"amazon_name_text": "Amazon Pay",
"credit_card_cvv_label": "CVV",
"credit_card_expiration_invalid_error": "Data ważności karty muszi być aktualna oraz zawierac się w ormacie MM/RR",
"credit_card_expiration_label": "Data ważności",
"credit_card_expiration_required_error": "Data ważności jest wymagana",
"credit_card_name_label": "Dane właściela",
"credit_card_name_required_error": "Imię i nazwisko jest wymagane",
"credit_card_cvv_invalid_error": "Kod CVV musi być ważny",
"credit_card_cvv_required_error": "Kod CVV jest wymagany",
"credit_card_cvv_help_text": "Dla kard VISA i Mastercard, kod CVV jest trzycyfową wartością zamieszczoną z tyłu karty.",
"credit_card_number_invalid_error": "Karta płatnicza musi być ważna",
"credit_card_number_label": "Numer karty płatniczej",
"credit_card_number_required_error": "Numer karty płatniczej jest wymagany.",
"klarna_name_text": "Klarna",
"payment_cancelled": "Płatność została anulowana.",
"payment_error": "Please try again. Wystąpił błąd podczas przetważania Twojej płatności. Proszę spróbować jeszcze raz.",
"payment_heading": "Płatność",
"payment_method_disabled_error": "Wybrana metoda płatności nie jest dłużej dostępna. Kliknij OK aby zobaczyć aktualnie dostępne metody płatności.",
"payment_method_error": "Wiadomośc od agenta płatności: {message}",
"payment_method_invalid_error": "Wystąpił problem podczas przetwarzania Twojej płatności w sklepie. Skontaktuj się ze sprzedawcą lub wybierz inną metodę płatności.",
"payment_method_label": "Metoda Płatności",
"payment_method_unavailable_error": "Ten dostawca płatności jest czasowo niedostępny. Prosze spróbowac później",
"payment_not_required_text": "Ta płatność nie jest dostępna dla tego zamówienia.",
"paypal_continue_action": "Kontynuuj przez PayPal",
"paypal_description_text": "Pay zapłać przez konto PayPal",
"paypal_name_text": "PayPal",
"place_order_action": "Złóż zamówienie",
"place_order_error": "Wystąpił błąd podczas składania zamówienia. Prosze skontaktuj się z nami."
},
"redeemable": {
"applied_text": "Zastosowano",
"apply_action": "Zastosuj",
"apply_store_credit_after_action": "Wykorzystaj dodatkowe złotówki",
"apply_store_credit_before_action": "Zastosuj",
"code_invalid_error": "Karta podarunkowa lub kod zniżkowy jest nieważny.",
"code_label": "Karta podarunkowa lub kupon zniżkowy",
"code_required_error": "Prosze wprowadzić kartę podarunkową lub kupon zniżkowy.",
"coupon_text": "Kupon zniżkowy",
"gift_certificate_remaining_text": "Pozostało",
"gift_certificate_text": "Karta podarunkowa",
"remove_action": "Usuń",
"store_credit_available_text": "Twoje konto posiada {storeCredit} dodatkowych złotówek do wykorzystania",
"toggle_action": "Kupon zniżkowy/promocyjny"
},
"remote": {
"connection_error": "Połączenie ze zdalną kasą zostało odrzucona, proszę spróbować później.",
"continue_with_text": "Lub kontynuuj",
"payment_method_error": "There was an error retrieving your remote payment method. Please try again. Wystąpił błąd podczas otrzymywania zdalnej płatności. Proszę spróbować później.",
"session_error": "Twoja sesja wygasła. Prosze zaloguj się ponownie.",
"shipping_address_error": "Wystąpił brąd podczas przetwarzania Twojego adresu dostawy. Prosze spróbuj jeszcze raz.",
"sign_out_action": "Wyloguj się z {providerName}",
"sign_out_after_action": "aby zobaczyć pozostałe metody płatności",
"sign_in_required_error": "Zalogowanie się jest niezbędne przed dokonaniem płatności.",
"sign_out_before_action": ""
},
"shipping": {
"cart_change_error": "Została wykryta aktualizacja produktów w koszyku, wycena Twojej dostawy została zaktualizowana. Wybierz sposób dostawy aby kontynuować.",
"enter_shipping_address_text": "Prosze wprowadzić adres dostawy aby uzyskać jej wycenę.",
"order_comment_label": "Komentarz do zamówienia",
"save_shipping_address_error": "Wystąpił błąd podczas zapisywania adresu dostawy. Prosze spróbować ponownie.",
"save_shipping_option_error": "Wystąpił błąd podczas zapisywania wyceny Twojej dostawy. Proszę spróbuj jeszcze raz.",
"select_shipping_address_text": "Prosze wybrać adres dostawy w zamówieniu aby uzyskać dane do wyceny.",
"shipping_address_heading": "Adres dostawy",
"shipping_heading": "Dostawa",
"shipping_method_label": "Forma dostawy",
"shipping_option_expired_error": "Cena dostawy nie jest już aktyalna. Kliknij OK aby zaktualizować.",
"shipping_option_expired_heading": "Cena Twojej dostawy została zaktualizowana.",
"view_shipping_options_action": "Zobacz pozostałe opcje"
},
"social": {
"share_action": "Udostępnij",
"share_heading": "Pochwal się znajomym swoim zakupem.",
"tweet_action": "Tweetuj"
},
"terms_and_conditions": {
"agreement_required_error": "Proszę zaakceptuj regulamin",
"agreement_text": "Tak, akcepyuję regulamin sklepu.",
"agreement_with_link_text": "Tak, zgadzam się z warunkami regulaminu",
"terms_and_conditions_heading": "Regulamin"
},
"order_confirmation": {
"order_number_text": "Numer Twojego zamówienia to <strong>{orderNumber}</strong>",
"order_pending_review_text": "Twoje zamówienie zostało złożone i oczekuje na zaksięgowanie płatności. Po otrzymaniu płatności rozpoczniemy prosces wysyłki.",
"order_with_downloadable_digital_items_text": "Możesz pobrać swoje produkty poprzez kliknięcie w link na tej stronie, lub poprzez zalogowanie się na swoje konto. Link do pobrania otrzymasz także w emailu z potwierdzeniem zamówienia.",
"order_with_support_number_text": "Wysyłamy do Ciebie e-mail z inormacjami dotyczącymi Twoich zakupów. Jeśli masz dodatkowe pytania napisz do nas <a ng-href=\"mailto:{supportEmail}?Subject=Order {orderNumber}\" target=\"_top\">{supportEmail}</a> lub zadzwoń na {supportPhoneNumber}.",
"order_without_downloadable_digital_items_text": "Gdy otrzymamy Twoją płatnośc prześlemy do Ciebie e-mail z jej potwierdzenienim.",
"order_without_support_number_text": "Wyślemy do Ciebie e-mail zawierający inormacje o Twoim zamówieniu. Jeżeli masz dodatkowe pytania napisz do nas <a ng-href=\"mailto:{supportEmail}?Subject=Order {orderNumber}\" target=\"_top\">{supportEmail}</a>.",
"thank_you_customer_heading": "Dziękujemy {name}!",
"thank_you_heading": "Dziękujemy!"
}
}
}
can anybody suggest me right direction?

Automatic, soft hyphenation in CSS

In December last year, CSS3 Hyphens support supposedly came to Chrome. Also, IE should be on board, in addition to other major browsers.
Update: Upon receiving the answers below, I understand that I misinterpreted the footnote on caniuse.com. It says: 'Only supports the auto value on Mac for now'. I interpreted this as meaning 'On the Mac, only the auto value is supported for now'. But what is really meant is 'The Mac is the only platform where the auto value is supported for now'. /Update.
However, I'm having trouble implementing for either Chrome or IE. I have read several older (and now somewhat outdated) SE posts (1, 2, 3) and made a jsfiddle that unfortunately only yields the intended results in Firefox.
Supposedly, hyphenation should work in IE for my target languages, Norwegian (lang="no") and English (lang="en") without manually adding dictionaries (hyphenate-resource).
Are there modifications that can be made to the fiddle that will make the hyphenation work in IE and/or Chrome without dictionaries? If not, does anyone know a useful hyphenate-resource for Norwegian?
If not we'll have to consider using hypher or hyphenator, but I would prefer avoiding a JavaScript implementation for what I should get natively from the browser.
<!DOCTYPE html>
<html lang="nb">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-language" content="no"/>
<title>hyphen tests</title>
<style>
html,body{height:100%}
.uc {
font-family: Code2000, "TITUS Cyberbit Basic", "Doulos SIL",
"Chrysanthi Unicode", "Bitstream Cyberbit",
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
"Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif",
"Lucida Sans Unicode";
font-family /**/:inherit; /* resets fonts for everyone but IE6 */
font-size:100%;
}
body{
}
div.main{-moz-column-count:6;
-webkit-column-count:6;
column-count:6;
}
section, article {
margin: 0 0;
outline: 1px orange solid;
}
h2,p{
margin:0;
text-align:justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/*word-break:break-all;*/
}
</style>
</head>
<body class="uc">
<script>document.write(document.documentElement.getAttribute('lang'));</script>
<div class="main">
<section>
<h2>none</h2>
<p>Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>no</h2>
<p lang="no">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>nn</h2>
<p lang="nn">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<h2>nb</h2>
<p lang="nb">Det er god tilgang på kompetanse mange steder i Norge. Statlige virksomheter må benytte denne kompetansen bedre, og bidra til å bygge sterke kompetansemiljøer i hele landet, sier kommunal- og moderniseringsminister Jan Tore Sanner om regjeringens plan for lokalisering av statlige arbeidsplasser.</p>
<!--<p>– Denne planen vil skape nye muligheter for folk og lokalsamfunn, og bidra til vekst og utvikling både i byer og distrikter, sier Sanner.</p>
<p>Planen for lokalisering av statlige arbeidsplasser er et vedlegg til stortingsmeldingen «Bærekraftige byer og sterke distrikter».</p>
<p>– Så langt i denne regjeringsperioden er det vedtatt å flytte ut eller etablere om lag 630 statlige arbeidsplasser utenfor Oslo. Planen beskriver også hvordan regjeringen nå skal utrede ytterligere etablering av statlig virksomhet i hele landet, sier Sanner.</p>
<p>– Når statlige virksomheter plasseres i hele landet, kan flere få spennende karrieremuligheter i det lokalmiljøet de kommer fra, og dermed kunne flytte hjem etter fullført høyere utdanning. Med ny teknologi kan statlige virksomheter drives flere steder, og samtidig være tilgjengelige både for publikum og samarbeidspartnere, sier Sanner.</p>
<p>De nye oppgavene som kan bli flyttet, finnes innen blant annet kunnskapsforvaltning, landbruksforvaltning og administrative tjenester. Blant disse virksomhetene er Politihøgskolen, Språkrådet, Fredskorpset, Likestillings- og diskrimineringsnemnda og deler av NVE.</p>
<p>- Jeg forstår godt at beskjeder som dette er krevende for de ansatte i disse virksomhetene. Nå skal vi sikre gode prosesser videre, der de ansatte skal bli hørt. Vi har også gode ordninger for ansatte i omstilling, sier Sanner.</p>-->
</section>
<section title="English">
<h2>none</h2>
<p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en</h2>
<p lang="en">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en-au</h2>
<p lang="en-au">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
<h2>en-gb</h2>
<p lang="en-gb">As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
</section>
<section title="German">
<h2>none</h2>
<p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
<h2>de</h2>
<p>Als Designer versuchen, Erstellen von funktionalen arbeiten, sind oft wir verpflichtet, unsere Entwürfe als fertige wie möglich aussehen zu machen.</p>
</section>
</div>
</body>
</html>
I'm afraid Chrome only supports hyphens: auto on Mac for now (and mdn seems to imply only for english as well, not sure). The job to support it for Windows/Android/Chrome OS is here.
To get hyphens: auto to work in IE you have to have the correct language packs installed. I also had to use either lang="nn" or lang="nb". lang="no" didn't seem to work.
Note: I don't actually know what I'm talking about, this is just from experimenting.
A workaround (no CSS solution) for as long as you need to support browsers instead of the other way around:
Use server side hyphenation with the line break interator from ICU, and insert <wbr> tags.
Scripting languages like PHP support these kind of purposes.
Then browsers will hypthenate as dictated, and there is no need for client side JS libraries, you can do everything else with CSS.

angular $sanitize vs. ng-bind-html

I am using angular's ng-bind-html to bind this text to page:
Ale
skoro nikdy sa nepozeráme na priemerné produkty s údivom, že nie sú skvelé.
Priemerné služby a produkty robia to, čo sa od nich očakáva. Nastavili ale
latku tak nízko, že skoro ani nemá cenu urobiť kvôli ním pár krokov navyše, aby
ste si ich kúpili.<div><br></div><div><br></div><div>Prečo
nie je každé jedlo v reštaurácii skvelou kúpou za svoju cenu? Vyzerá to, ako by
sme ochotne brali všetko viac menej zlé za prijateľné, s výnimkou prípadov, keď
daný produkt, služba alebo firma nestoja úplne za nič.</div><div><br></div><div><br></div><div>Vyzvite priemernosť vo
vašej firme na súboj. Pretože presne takýto pohľad priemernosti na vás, môžu
mať aj vaši zákazníci.</div>
so you can see it contains various html markups encoded characters.
ng-data-bind handles this very correctly so the text is readable on the page.
However when I use $sanitize for this text to filter the html characters out, I'm getting this:
Ale
skoro nikdy sa nepozeráme na priemerné produkty s údivom, že nie sú skvelé.
Priemerné služby a produkty robia to, čo sa od nich očakáva. Nastavili ale
latku tak nízko, že skoro ani nemá cenu urobiť kvôli ním pár krokov navyše, aby
ste si ich kúpili.<div><br></div><div><br></div><div>Prečo
nie je každé jedlo v reštaurácii skvelou kúpou za svoju cenu? Vyzerá to, ako by
sme ochotne brali všetko viac menej zlé za prijateľné, s výnimkou prípadov, keď
daný produkt, služba alebo firma nestoja úplne za nič.</div><div><br></div><div><br></div><div>Vyzvite priemernosť vo
vašej firme na súboj. Pretože presne takýto pohľad priemernosti na vás, môžu
mať aj vaši zákazníci.</div>
so how can I mimic ng-bind-html inside my controller to clear the text and use it further?
EDIT: to me more clear, I don't need to bind this text to the view. This already works. I need to work with the text in controller's logic so I just need to clean it and use it further.
$sce.trustAsHtml() should be used.
HTML:
<td ng-bind-html="mData.data | unsafe"></td>
JS:
mOverview.controller('appController', function ($scope, $sce) {
$scope.mData = [
{
'data': 'your data'
}
];
});
mOverview.filter('unsafeFilter', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});

Chrome Google Dictionary extension on local html page

I have the chrome google dictionary extension installed. I have a simple html page in my desktop called test.html and I kept some text in it. But when I open the page in google chrome and double click on any word it does not open any pop up box. But the extension works for any other websites.
Anything am I missing?
Here is the sample test.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html" charset="ISO-8859-1" />
</head>
<body>
<h1>My First Heading</h1>
<p>
Till och med självmorden betedde sig illa i Wyoming Valley.
Pojken i motellrummet hade bara ett par boxershorts på sig och låg i fosterställning ovanpå det beiga, indianmönstrade sängöverkastet. Han var högst arton år gammal; halvlångt, rågblont hår, breda axlar, smal om höfterna. Runt vänster biceps var en slips stramt åtdragen, och strax intill de slutna ögonen vilade en tömd uppdragningskanyl som tycktes vara det sista han skådat i jordelivet.
Det var inte första gången George Decker, Bear Creeks polischef, såg ett lik. Han hade tjänstgjort i marinkåren under invasionen av Grenada. Och under de gångna femton åren i Pennsylvanias fattigaste region hade han tappat räkningen: jaktolyckor, bilolyckor med och utan vilt, urspårade knivslagsmål – ett och annat kallblodigt mord, till och med. Men den här gången var det annorlunda. Pojken såg mest ut att ligga och sova, även om han hade spytt ner sig. Det var något med hans ungdom, med att han inte hade råkat ut för en deformerande olycka, som gjorde det hela så mycket mer tragiskt än de fasor Decker sett efter bilkrascher och granatattacker. Det var själva frivilligheten.
För det måste vara självmord, inte en vanlig överdos. Papper och penna på ena nattduksbordet, kläder prydligt hopvikta över en stolsrygg.
Rummet var det billigaste man kunde hitta på flera mils omkrets. Väggarna hade ingen klassificerbar färg. Teven, en burkig tjugotummare som genomlevt decennier i fångenskap, stod fastkedjad ovanpå ett kylskåp med träpanel. Det lilakaklade trånga badrummet var fuktigt som en ångbastu och fläkten överröstade nästan dånet från motorvägen utanför. Alla lampor var tända, ändå var det som om mörkret där inne var för kompakt för att riktigt låta sig skingras. Mellan heltäckningsmattan och det rötskadade rågolvet hade man stoppat tidningspapper som gjorde att det frasade när man gick.
Deckers assistent, en kvinna som luktade hårfärgningsmedel var tredje vecka och alltid harklade sig när det var tyst för länge, klev åt sidan när han gick förbi och förde undan de skotskrutiga gardinerna. Genom fönstren syntes morgondimman ånga in från bergen och sakta dra ner över dalgången.
Han strök handen över skäggstubben.
”Vem är det?”
”Christopher Warsinsky”, sa assistenten och läste vidare på körkortet. ”237 Lakeron Drive. Skulle ha fyllt sjutton om två månader.”
”Bilnycklar?”
”Nej.”
”Hur kom han hit då?” Decker såg sig omkring i rummet.
”Det ligger en busshållplats tvåhundra meter bort. Eller så fick han skjuts.”
På ena nattduksbordet stod en tom, öppen medicinflaska. Decker böjde sig fram och luktade utan att plocka upp den. Ingen doft alls. Heroin, naturligtvis.
”Kolla här”, sa assistenten vid det andra bordet och lyfte papperet med en pincett.
</p>
</body>
</html>
I think it is because you are accessing to local file, so you use the "protocol" file://path/to/test.html. But I think that in your manifest.json, you have injected your content scripts by "http://*/*" pattern.
When you load local file, you don't use HTTP protocol. So you have to modify your manifest or install a local web server on your machine (like WAMP if using windows or LAMP if using linux or MAMP if using macos).
This extension doesn't work with local files. It has been suggested for future versions. A workaround suggested is importing things into google docs. I know its not an ideal solution. Good luck.
There are offline dictionary chrome extensions that will do this for you. I am not sure how they compare.
Go to the extensions page (chrome://extensions/), find Google Dictionary and click on "Details". You'll find an option that says "Allow access to file URLs".