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.
Related
I have many xml files that I will convert to JSON and then load it into openRefine or pandas dataframe for analysis.
The xml file look like
<NATURE_QUANTITY_SCOPE>
<TOTAL_QUANTITY_OR_SCOPE>
<P>Entreprisens omfang:</P>
<P>Arbeidet omfatter bl.a følgende:</P>
<P>• Ramming av stålrør</P>
<P>• Løsmassearbeider, graving over og under vann, erosjonssikring</P>
<P>• Forskalings-, armerings, og betongarbeider i stålrørspeler, kaipir og bru</P>
<P>• Elektroarbeider </P>
<P>Arbeidet består bl.a av levering og montering av:</P>
<P>• aggregathus</P>
<P>• pullere og T-pullere</P>
<P>• lodd til redningsleider</P>
<P>• dumperdekk</P>
<P>• aggregat og sylindere</P>
<P>• sperrebom</P>
<P>Videre består arbeidet bl.a av mottak og montering av: </P>
<P>• brulager inkl. fester til landkar, fendring </P>
<P>• heisetårn </P>
<P>• sikringsbjelke</P>
<P>• horisontale stålrør</P>
<P>• komplette fenderpanel med innstøpingsgods/kjetting/gummifendere etc.</P>
<P>• innstøpingsgods for dumperdekk</P>
<P>• innstøpingsgods for overgangsplate</P>
<P>• innstøpingsgods for horisontale stålrør</P>
<P>• alle bolter for innstøpingsgods/vemohylser/skruer etc.</P>
<P>• redningsleider</P>
<P>• rekkverk og port kai</P>
<P>• fotlist kai</P>
</TOTAL_QUANTITY_OR_SCOPE>
</NATURE_QUANTITY_SCOPE>
I have tried this code
import xmltodict
import os
import json
path = r"C:\Users\ujorbjo00\Documents\xmltodict test"
for filename in os.listdir(path):
if not filename.endswith('.xml'):
continue
fullname = os.path.join(path, filename)
with open(fullname, 'r', encoding='utf_8') as f:
xmlString = f.read()
jsonString = json.dumps(xmltodict.parse(xmlString, encoding='utf-8',process_namespaces=True, xml_attribs=True))
with open(fullname[:-4] + ".json", 'w', encoding='utf_8') as f:
f.write(jsonString)
but the JSON fil look like
"NATURE_QUANTITY_SCOPE": {
"TOTAL_QUANTITY_OR_SCOPE": {
"P": ["Entreprisens omfang:", "Arbeidet omfatter bl.a f\u00f8lgende:", "\u2022\tRamming av st\u00e5lr\u00f8r", "\u2022\tL\u00f8smassearbeider, graving over og under vann, erosjonssikring", "\u2022\tForskalings-, armerings, og betongarbeider i st\u00e5lr\u00f8rspeler, kaipir og bru", "\u2022\tElektroarbeider", "Arbeidet best\u00e5r bl.a av levering og montering av:", "\u2022\taggregathus", "\u2022\tpullere og T-pullere", "\u2022\tlodd til redningsleider", "\u2022\tdumperdekk", "\u2022\taggregat og sylindere", "\u2022\tsperrebom", "Videre best\u00e5r arbeidet bl.a av mottak og montering av:", "\u2022\tbrulager inkl. fester til landkar, fendring", "\u2022\theiset\u00e5rn", "\u2022\tsikringsbjelke", "\u2022\thorisontale st\u00e5lr\u00f8r", "\u2022\tkomplette fenderpanel med innst\u00f8pingsgods/kjetting/gummifendere etc.", "\u2022\tinnst\u00f8pingsgods for dumperdekk", "\u2022\tinnst\u00f8pingsgods for overgangsplate", "\u2022\tinnst\u00f8pingsgods for horisontale st\u00e5lr\u00f8r", "\u2022\talle bolter for innst\u00f8pingsgods/vemohylser/skruer etc.", "\u2022\tredningsleider", "\u2022\trekkverk og port kai", "\u2022\tfotlist kai"]
}
Which is 26 rows and no encoding of the Norwegian char!
_ - DOFFIN_ESENDERS - FORM_SECTION - CONTRACT - FD_CONTRACT - OBJECT_CONTRACT_INFORMATION - QUANTITY_SCOPE - NATURE_QUANTITY_SCOPE - TOTAL_QUANTITY_OR_SCOPE
_ - DOFFIN_ESENDERS - FORM_SECTION - CONTRACT - FD_CONTRACT - OBJECT_CONTRACT_INFORMATION - QUANTITY_SCOPE - NATURE_QUANTITY_SCOPE - TOTAL_QUANTITY_OR_SCOPE - P
_ - DOFFIN_ESENDERS - FORM_SECTION - CONTRACT - FD_CONTRACT - OBJECT_CONTRACT_INFORMATION - QUANTITY_SCOPE - NATURE_QUANTITY_SCOPE - TOTAL_QUANTITY_OR_SCOPE - P – P
I well have all in one row
I'm not sure I understand everything in your question but for the Norwegian char issue you can have a look at this post.
As for the XML to JSON conversion into a list, that is to be expected. In the conversion, the XML tags are converted to JSON dictionary keys and keys in a dictionary are, unlike tags in XML, unique, so everything under the same tag gets dumped under the same key. It should also work the other way around - think of an HTML list: every list element gets surrounded by the same <li> tag.
If that's not the behavior you want, please specify what the desired behavior would have been.
I've noticed 2 cases in which Microsoft Translator Text should raise errors when using custom engines, but instead has an unexpected behavior.
Normal Case
I send a request with the method POST.
URL = https://api.cognitive.microsofttranslator.com/translate
parameters :
- api-version=3.0
- textType=plain
- category=my_engine_id
- from=de
- to=en
Headers={"Ocp-Apim-Subscription-Key": my_key,'Content-type': 'application/json'}
Body (JSON format) :
[{"Text": "Klicken Sie in jedem Bildschirm auf das Textbeispiel, das am besten lesbar ist."},
{"Text": "Verschiedene Themen aus den Bereichen Wortschatz, Satzbau, Kohärenz, Textwiedergabe,
Kommasetzung und Orthographie werden anhand von Textbeispielen und Übungen vorgestellt."},
{"Text": "„Auch wenn zwei Staaten in Deutschland existieren, sind sie doch füreinander nicht Ausland; ihre Beziehungen zueinander können nur von besonderer Art sein.“"},
{"Text": "Mit dieser Formel bricht der neue Kanzler ein jahrzehntelanges Tabu."},
{"Text": "Bislang wird der östliche Teil Deutschlands von den bundesdeutschen Politikern als SBZ, Zone oder „sogenannte DDR“ bezeichnet."}]
The response is as expected:
[{"translations":
[{"text": "On each screen, click on the text sample that is most readable.",
"to": "en"}]},
{"translations":
[{"text": "Various topics from the fields of vocabulary, typesetting, coherence, text reproduction, comma setting and orthography are presented using text examples and exercises.",
"to": "en"}]},
etc.
Case 1
I change the parameter to=fr in the URL (instead of "en").
The response shows that the text has been translated into french, although the custom engine is only trained from DE>EN (therefore I think a generic engine was used instead, but there is no info in the HTTP response) !
[{"translations":[{"text":"Sur chaque écran, cliquez sur l’échantillon de texte le plus lisible.","to":"fr"}]},{"translations":[{"text":"Divers sujets des domaines du vocabulaire, du typage, de la cohérence, de la reproduction du texte, du décor de virgule et de l’orthographe sont présentés à l’aide d’exemples de textes et d’exercices.","to":"fr"}]},{"translations":[{"text":"\"Même si deux États existent en Allemagne, ils ne sont pas étrangers l’un à l’autre; Leurs relations les uns avec les autres ne peuvent être que d’un genre particulier.","to":"fr"}]},{"translations":[{"text":"Avec cette formule, le nouveau chancelier brise un tabou de dix ans.","to":"fr"}]},{"translations":[{"text":"Jusqu’à présent, la partie orientale de l’Allemagne est appelée par les politiciens fédéraux allemands SBZ, zone ou « soi-disant DDR ».","to":"fr"}]}]
Instead of this behaviour, I would have expected an error in the HTTP response :
400075 The language pair and category combination is not valid.
Case 2
I change the parameter from=da in the URL (instead of "de").
The response shows that the translation is simply a copy of the source text, although it indicates that it was translated into "en" !
[{"translations":[{"text":"Klicken Sie in jedem Bildschirm auf das Textbeispiel, das am besten lesbar ist.","to":"en"}]},{"translations":[{"text":"Verschiedene Themen aus den Bereichen Wortschatz, Satzbau, Kohärenz, Textwiedergabe, Kommasetzung und Orthographie werden anhand von Textbeispielen und Übungen vorgestellt.","to":"en"}]},{"translations":[{"text":"\"Auch wenn zwei Staaten in Deutschland existieren, sind sie doch füreinander nicht Ausland; ihre Beziehungen zueinander können nur von besonderer Art sein.\"","to":"en"}]},{"translations":[{"text":"Mit dieser Formula bricht der neue Kanzler ein jahrzehntelanges Tabu.","to":"en"}]},{"translations":[{"text":"Bislang wird der östliche Teil Deutschlands von den bundesdeutschen Politikern als SBZ, Zone oder \"sogenannte DDR\" bezeichnet.","to":"en"}]}]
Same as for Case 1, instead of this behaviour, I would have expected an error in the HTTP response :
400075 The language pair and category combination is not valid.
Is it normal that I don't get an error for these 2 cases ? Has anybody else encountered this behavior before ?
Actually I would like to either use these error codes, or else check before sending the translation request that the language pair corresponds to the custom engine, do you know of some way to do it ?
For case1, translation is done in two hops - de>en, en>fr. The custom engine is used for the first hop, and our general model is used for the second. If you want the translation to fail in this case instead, you can set the parameter allowFallback to false
allowFallback Optional parameter.
Specifies that the service is allowed to fallback to a general system when a custom system does not exist. Possible values are: true (default) or false.
docs
In the second case, the request contains German text but is labeled as Danish. There is nothing we can do here except return the input. If you want the api to detect the from language, omit it from the parameters and the api will run auto-detect on the text.
If the from parameter is not specified, automatic language detection is applied to determine the source language.
Hi I want to make the text on the page have a photo next to using flex.
I managed to do something like that, I couldn't find your way
https://codepen.io/Kxamil/pen/OJJBRLR
It must look like this and next to the text the picture
<main class="main-aboutus">
<div class="about">
<div class="aboutimg">
<img class="aboutusimg" src="./images/buiten.png" alt="">
<!-- </div> -->
<h3 class="head-about">Over Ons</h3>
<p class="desc-about">Fritz De Meyer uit Kaprijke, is de specialist bij uitstek voor alle binnen- en
buitenschilderwerken.
Schilderwerken De Meyer werkt met kwalitatieve producten om bij de klant een perfect resultaat te
garanderen. U als klant, kiest de graad van afwerking. Wij geven daarenboven steeds decoratieadvies
U kunt ons steeds contacteren voor een vrijblijvende prijsofferte.
Wij werken met Boss, Sikkens en Herbol
</p>
</div>
</div>
</main>
If is the about div to have display:flex, you just need to create 2 div inside it, and in the first one insert the text, and in the second one the image, display:flex will give around 50% each and align horizontally
Hi guys i have an image side by sdie with some text and i am trying to get it to appear below the text on a mobile device but right now its appearing above it, I'm using bootstrap 3.
html:
<div class="row">
<div class="col-xs-12 col-md-6 ">
<div class="about-img"><img src="img/about.jpg" class="img-responsive" alt=""></div>
</div>
<div class="col-xs-12 col-md-6">
<div class="about-text">
<h2>Title</h2>
<hr>
<p>Bryggeriet är en restaurang, sportbar och nattklubb som ligger mitt på Avenyn i Göteborg. Sedan vi öppnade portarna 1993 har vi varit ett självklart val för alla som vill äta riktigt god mat, ta en trevlig lunch, följa sitt favoritlag i Sportbaren, komma förbi på en after work eller dansa helgnatten lång. Eller om man bara vill beställa någonting gott att dricka i en avslappnad och gemytlig miljö.</p>
<p>Hos oss kan och bör du förvänta dig mat som är en fröjd för både ögat och magen. Här står maten i fokus och vi tillagar alla våra rätter från grunden. Det betyder att du får fräsch mat som tillagas när du beställer den, gjord på råvaror av högsta kvalitet. Vi tar inga genvägar, utan serverar endast sådant som vi själva skulle uppskatta att få på tallriken..</p>
</div>
</div>
</div>
CSS:
#media only screen and (max-width: 768px) {
}
I have tried to float the element and then use clear:both but i cant seem to get anything to work to make the image appear at the bottom od the div below all the text.
Thanks
You could use the following bootstrap push and pull classes on medium and up screens;
col-md-pull-6, col-md-push-6
This will reorganise the flow of content - for example: https://jsfiddle.net/hfwr6n8z/2/
You should also restructure your HTML, and place the image wrapper div last in the DOM, so it is displayed last on small screens.
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".