flutter for web render Html with TextAlign.justify and rtl - flutter-web

I want to show a html code in one of my flutter web page and I used 'flutter_html'. this is part of my code:
Html(
data: """<p dir="rtl">آمادگی و شناخت</p><p dir="rtl">در مشاوره ازدواج به دو فرآیند توجه می شود؛ اول این که فرد بداند برای ازدواج آمادگی دارد یا نه و بعد از طرف مقابل شناخت کافی داشته باشد. فرد برای این که بداند آمادگی ازدواج دارد یا نه، می تواند از مشاور کمک بگیرد. فردی آمادگی ازدواج دارد که تعهد پایدار داشته باشد، یعنی برای فردی که وارد زندگی او شده است بار نباشد، زندگی بالنده ای داشته باشد، باعث آرامش وی شود، سرعت حرکت او را به سمت تعالی و پیشرفت بیشتر کند و اگر چنین نباشد، در واقع ازدواج تنها برای رفع بخشی از نیازها خواهد بود که به فرد برای پیشرفت و تعالی کمک نمی کند. بنابراین برای این که فرد میزان آمادگی خود را برآورد کند می تواند از مشاور حاذق در این حوزه کمک بگیرد. مشاور باید درباره موضوعات مختلف اطلاعات کافی داشته باشد و مولفه ها را بر اساس اهمیت آن بررسی کند. در مشاوره قبل از ازدواج دو عامل آمادگی و آشنایی مهم است.</p>
""",
defaultTextStyle: Theme.of(context).textTheme.headline2,
useRichText: true,
customTextAlign: (_) => TextAlign.justify,
),
I want my text be justify and rtl but it's not rtl and just TextAlign.justify work, look like " p dir="rtl" " do not render

I find answer, first must keep these parts of old code
useRichText: true,
customTextAlign: (_) => TextAlign.justify
then add html as child of:
Directionality(
textDirection: TextDirection.rtl,
child: Html...)

Related

Text extraction from a file format unknown to me

I have a lot of files obviously stemming from some web publishing system (unidentified) and want to convert them to plain text. The file format is characterised by a lot of curly braces, square brackets, and semicolons and contains formatting instructions besides the text. A sample file looks like this
{"content":[{"type":"paragraph","attributes":{"class":"align-left"},"content":["У Посольстві України в Республіці Польща 8 листопада було підписано Угоду між урядом України та урядом Монголії про взаємне скасування віз."]},{"type":"paragraph","attributes":{"class":"align-left"},"content":["“Ми підписали угоду, яка дозволяє громадянам України подорожувати без віз до Монголії. Це означає, що громадяни України можуть в’їжджати до Монголії без віз на 90 днів упродовж 180 днів” - ",{"type":"link","attributes":{"href":"https://www.facebook.com/UkraineMFA/posts/2498886686831903","target":"_blank","rel":null},"content":["повідомляє сторінка МЗС у Facebook"]}," із посиланям на посла України у Польщі Андрія Дещицю."]},{"type":"paragraph","attributes":{"class":"align-left"},"content":["Як підкреслив Дещиця, підписана угода важлива ще й тому, що до сьогоднішнього дня між Україною і Монголією діяла угода 1979 року, яка була підписана свого часу між СРСР і Монгольською Народною Республікою, а потім була підтверджена українським урядом."]}]}
What kind of file format is this? Is there a readily available converter to plain text or some documentation on that file format available?
A more readable way, is to use yaml format:
$ yq -p json -o yaml file
content:
- type: paragraph
attributes:
class: align-left
content:
- У Посольстві України в Республіці Польща 8 листопада було підписано Угоду між урядом України та урядом Монголії про взаємне скасування віз.
- type: paragraph
attributes:
class: align-left
content:
- '“Ми підписали угоду, яка дозволяє громадянам України подорожувати без віз до Монголії. Це означає, що громадяни України можуть в’їжджати до Монголії без віз на 90 днів упродовж 180 днів” - '
- type: link
attributes:
href: https://www.facebook.com/UkraineMFA/posts/2498886686831903
target: _blank
rel: null
content:
- повідомляє сторінка МЗС у Facebook
- ' із посиланям на посла України у Польщі Андрія Дещицю.'
- type: paragraph
attributes:
class: align-left
content:
- Як підкреслив Дещиця, підписана угода важлива ще й тому, що до сьогоднішнього дня між Україною і Монголією діяла угода 1979 року, яка була підписана свого часу між СРСР і Монгольською Народною Республікою, а потім була підтверджена українським урядом.
Or pretty print if as json:
$ jq . file
{
"content": [
{
"type": "paragraph",
"attributes": {
"class": "align-left"
},
"content": [
"У Посольстві України в Республіці Польща 8 листопада було підписано Угоду між урядом України та урядом Монголії про взаємне скасування віз."
]
},
{
"type": "paragraph",
"attributes": {
"class": "align-left"
},
"content": [
"“Ми підписали угоду, яка дозволяє громадянам України подорожувати без віз до Монголії. Це означає, що громадяни України можуть в’їжджати до Монголії без віз на 90 днів упродовж 180 днів” - ",
{
"type": "link",
"attributes": {
"href": "https://www.facebook.com/UkraineMFA/posts/2498886686831903",
"target": "_blank",
"rel": null
},
"content": [
"повідомляє сторінка МЗС у Facebook"
]
},
" із посиланям на посла України у Польщі Андрія Дещицю."
]
},
{
"type": "paragraph",
"attributes": {
"class": "align-left"
},
"content": [
"Як підкреслив Дещиця, підписана угода важлива ще й тому, що до сьогоднішнього дня між Україною і Монголією діяла угода 1979 року, яка була підписана свого часу між СРСР і Монгольською Народною Республікою, а потім була підтверджена українським урядом."
]
}
]
}
With jq, you can retrieve specifics parts. Ex:
jq '[.content | .[] | .content][0] | .[]' file
"У Посольстві України в Республіці Польща 8 листопада було підписано Угоду між урядом України та урядом Монголії про взаємне скасування віз."

Create a dictionary from the ouput of the program

This is a Python Program to get all the captions from youtube link:
from pytube import YouTube
yt = YouTube('https://youtu.be/5MgBikgcWnY')
captions = yt.captions.all()
for caption in captions:
print(caption)
and the output of the above program is:
<Caption lang="Arabic" code="ar">
<Caption lang="Chinese (China)" code="zh-CN">
<Caption lang="English" code="en">
<Caption lang="English (auto-generated)" code="a.en">
<Caption lang="French" code="fr">
<Caption lang="German" code="de">
<Caption lang="Hungarian" code="hu">
<Caption lang="Italian" code="it">
But I want to get only the lang and code from the above output in a dictionary pair.
{"Arabic" : "ar", "Chinese" : "zh-CN", "English" : "en",
"French : "fr", "German" : "de", "Hungarian" : "hu", "Italian" : "it"}
Thanks in Advance.
It's pretty simple
from pytube import YouTube
yt = YouTube('https://youtu.be/5MgBikgcWnY')
captions = yt.captions.all()
captions_dict = {}
for caption in captions:
# Mapping the caption name to the caption code
captions_dict[caption.name] = caption.code
If you want a one-liner
captions_dict = {caption.name: caption.code for caption in captions}
Output
{'Arabic': 'ar', 'Bangla': 'bn', 'Burmese': 'my', 'Chinese (China)': 'zh-CN',
'Chinese (Taiwan)': 'zh-TW', 'Croatian': 'hr', 'English': 'en',
'English (auto-generated)': 'a.en', 'French': 'fr', 'German': 'de',
'Hebrew': 'iw', 'Hungarian': 'hu', 'Italian': 'it', 'Japanese': 'ja',
'Persian': 'fa', 'Polish': 'pl', 'Portuguese (Brazil)': 'pt-BR',
'Russian': 'ru', 'Serbian': 'sr', 'Slovak': 'sk', 'Spanish': 'es',
'Spanish (Spain)': 'es-ES', 'Thai': 'th', 'Turkish': 'tr',
'Ukrainian': 'uk', 'Vietnamese': 'vi'}

Tabulator - Can't even get off the ground with Quickstart

Okay, so what am I doing wrong? I'm using the code below from the site under "Quickstart":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
</script>
</body>
</html>
I'm seeing the column headings, but -- where there should be data -- there is nothing showing up!
This is my 3rd attempt with this program. I have never gotten it to work correctly. I'd use something else but the examples on the website make it appear I can do what is called for.
You need the polyfills to get it to work on IE 11.
There is more info in the docs: http://tabulator.info/docs/4.2/browsers#ie
Copy pasted your same code
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="tabulator/dist/css/tabulator.css">
<script type="text/javascript" src="tabulator/dist/js/tabulator.min.js"></script>-->
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
<script>
//define some sample data
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
</script>
</body>
</html>

tabulator no element found matching selector

trying first super basic tabulator and getting stuck with console error "no element found matching selector". I've tried a couple different examples, can't figure out what I'm doing wrong. is this how naming is supposed to work?
<html>
<head><title>Test for tabulator</title>
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
<script>
//define data
var tabledata = [
{id:1, name:"Oli Bob", location:"United Kingdom", gender:"male", rating:1, col:"red", dob:"14/04/1984"},
{id:2, name:"Mary May", location:"Germany", gender:"female", rating:2, col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", location:"France", gender:"female", rating:0, col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", location:"USA", gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", location:"Canada", gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Frank Harbours", location:"Russia", gender:"male", rating:4, col:"red", dob:"12/05/1966"},
{id:7, name:"Jamie Newhart", location:"India", gender:"male", rating:3, col:"green", dob:"14/05/1985"},
{id:8, name:"Gemma Jane", location:"China", gender:"female", rating:0, col:"red", dob:"22/05/1982"},
{id:9, name:"Emily Sykes", location:"South Korea", gender:"female", rating:1, col:"maroon", dob:"11/11/1970"},
{id:10, name:"James Newman", location:"Japan", gender:"male", rating:5, col:"red", dob:"22/03/1998"},
];
//define table
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
</script>
</head>
<body>
<h1>test tabulator </h1>
<div id="example-table"></div>
</body>
</html>
is there something obvious I'm missing? this is copied/pasted right from the samples.
Yes, because the element does not exist when you accessed it. Move your javascript after the div and it should work. Or use the page load event:
Bottom page:
<div id="example-table"></div>
<script>
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
</script>
Page Load:
window.addEventListener("load", function() {
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
},false);

Load table data from text file

My table data is stored in a text file named test_array.txt
[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
How do I call a text file when I setData. I tried the below and the table structure is build, but the data does not load, but states ERROR in the table.
//load sample data into the table
table.setData("../textfiles/test_array.txt");
In my browser console, I get the following error message.
Ajax Load Error: SyntaxError: "JSON.parse: expected property name or '}' at line 2 column 2 of the JSON data"
Here is my entire script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Johnson County Pharmacy Association, Johnson County, Iowa" />
<meta name="keywords" content="Johnson County Iowa Pharmacy Association pharmacist technician" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/tabulator.css" rel="stylesheet" />
<link href="../css/tabulator.css.map" rel="stylesheet" />
<script type="text/javascript" src="../js/tabulator.js"></script>
<title>JCPA</title>
</head>
<body>
<div id="tblwrap">
<h2>Meeting Information Editor</h2>
<div id="example-table"></div>
<script>
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
layout:"fitDataFill",//fit columns to fit data and width of table (optional)
//data:tableData, //set initial table data
columns:[ //Define Table Columns
{title:"Name", field:"name", width:150},
{title:"Age", field:"age", align:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
//load sample data into the table
table.setData("../textfiles/test_array.txt");
</script>
</div>
</body>
</html>
I got it to work using double quotes on the keys
[
{"name":"Oli Bob", "age":"12", "col":"red", "dob":""},
{"name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"}
]
You have an invalid trailing comma on line 6 of your code, the row with an id of 5 should not have a comma at the end, and you do not need a semi colon after the array, it is invalid JSON. It should be:
[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"}
]
Have you checked in your browser network developer tools what the response is? It may also be possible that your server is not returning the file you are expecting, checking in the network tools should let you confirm what is being returned

Resources