I'm using flutter_html package on my app to parse HTML from API. The html code is:
<p>Text text text text <span style="background: #FF0000; color: #FFFFFF; padding: 2px 5px; border-radius: 3px">XX</span> text text</p>
And it should print like https://i.imgur.com/0056kcT.png
But it prints this way https://i.imgur.com/FXO5dKD.png
The max I get to this is patching flutter_html packe like this:
if(node.attributes.isNotEmpty){
if(node.attributes['background'] != null){
childStyle = childStyle.merge(TextStyle(
//backgroundColor: Color(int.parse(node.attributes['background']))));
background: Paint()
..color = Color(int.parse(node.attributes['background']))
..style = PaintingStyle.fill
..strokeCap = StrokeCap.round
..strokeWidth = 2.0
));
}
if(node.attributes['color'] != null){
childStyle = childStyle.merge(TextStyle(
color: Color(int.parse(node.attributes['color']))));
}
if(node.attributes['padding'] != null){
childStyle = childStyle.merge(TextStyle(
wordSpacing: double.parse(node.attributes['padding'])));
}
}
But how can I add rounded border and padding?
Thanks
flutter_html currently doesn't support css, both inline and in the style tag. Version 1.0.0 has planned support for both of those use cases. It should be released towards the end of November 2019.
Source: I am the owner/prgrammer of the flutter_html package.
Related
u[JSON Fetch Request example]
{
text-underline-offset: 3px;
}
<h1><u>JSON Fetch Request example</u></h1>
in above code ,I am unable to offset the underline.
but I can choose the a tag as my following code works as per mdn article(ps:i am unable to find mdn article):
a[href="https://cnn.com/"] {
color: red;
}
cnn
You can add a CSS class to the element. You can also select elements with .querySelector.
.r{
color: red;
}
<p>This is a <u>test</u> of the selection of u elements w JavaScript.</p>
<p>This is a <u class=r>test</u> of the selection of u elements w/o JavaScript.</p>
I am trying to create a custom font-size attribute in html where the value I assign to the attribute is passed to the CSS file but it does not seem to be working
HTML:
<h1 fsize="4rem">TEST</h1>
CSS:
h1::after {
font-size: attr(fsize);
}
I am trying to do it without using any classes, or style tags
if you want attribute then you need javascript (at least in 2022)
but for now, you can do it with CSS vars (CSS only)
more details here https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Support is pretty good, including Edge (but no IE) 96.61% https://caniuse.com/?search=var()
h1::after {
content: "hello world";
font-size: var(--fsize);
}
<h1 style="--fsize: 2rem;"></h1>
<h1 style="--fsize: 5rem;"></h1>
<h1 style="--fsize: 10rem;"></h1>
<h1 style="--fsize: 3rem;"></h1>
still want the attribute?
function styleFsize() {
const ATTR_NAME = "fsize";
const allEl = document.querySelectorAll(`[${ATTR_NAME}]`);
allEl.forEach(el => {
el.style.setProperty(`--${ATTR_NAME}`, el.getAttribute(`${ATTR_NAME}`));
})
}
styleFsize();
h1::after {
content: "hello world";
font-size: var(--fsize);
}
<h1 fsize="10rem"></h1>
<h1 fsize="5rem"></h1>
<h1 fsize="2rem"></h1>
<h1 fsize="1rem"></h1>
note:
if you want a valid HTML attribute...
you need to use data-NAME_ATTRIBUTE
so it will become data-fsize
by doing so now you can do
✅ el.dataset.fsize instead of ❌ el.getAttribute("fsize")
attr works only for content in most (?all) browsers at the moment.
You can use a CSS variable instead. i.e. have a style attribute rather than an fsize attribute. No need for further style tags.
h1::after {
font-size: var(--fsize);
content: 'I am the content of the after pseudo element';
}
<h1 style="--fsize:4rem;">TEST</h1>
Note: if you do ever want to use your own attribute then it should start with data-
Using import.io connector, I was able to extract a segment of html from the source web site. This result is returned as "html" type. The result is a single table of data with styles defined in the body html but not extracted. This resulted in the html segment extracted displayed with NO style and looking terrible.
Is there a way to INCLUDE extracting CSS styles, i.e. multiple css hrefs included in the source html, like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
Also at the same time to include dynamic css like the following:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in the connector extract so that the resultant html segment can be properly styled and displayed?
Thanks in advance!
This is a fairly interesting use case.
You can extract the link and style elements as html using a custom xpath such as //link and //style
You can then output them into your page HTML and that will import the css documents from the pages and should include the styling.
(Be aware that the website in question may not want you to be taking their css and using it on a different website, so they may block downloads of css to websites hosted in different domains)
Sorry, I'm not familiar with Import.io.
Is there way to get refs from links and content from styles? Are you using javascript?
If so, then you may use the folowing js functions to include your styles into the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}
I have an HTML file with thousands of links formatted like:
link text<br>
link text<br>
link text<br>
etc.
I want to have the visited links not display at all. Essentially what a:visited{display:none;} would do if it were possible. In case you aren't aware, you cannot apply this style to the a:visited pseudo class for security purposes. I cannot use javascript for this particular case. I can use any other CSS ideas that you guys might have. For now I am simply using a:visited{color:white;} on a white background to make the visited link text not display, however that leaves gaps in my list and I would prefer to hide the visited link text all together so that my list is more concentrated and without blank spaces. Is this perhaps possible with a Google Chrome extension?
I've tried Tampermonkey with the following script but to no avail:
(function() {
var css = "A:Link, A:Visited, A:Hover {text-decoration: none;}\n\nA:Visited {color:#fff;}\n\n<div style=\"position: fixed; background: none; border: 0px solid #ffcc00; width: 100px; z-index: 100;bottom: 700px;\">\n\n<img src=\"https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif\" />";
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}
})();
I would like to make groups of the text content of an <option /> tag. Say I have the following: <option>8:00 (1 hour)</option>, the time pattern 8:00 can be modified, then the text in parenthesis (1 hour) can also be modified.
I was thinking of doing something like
<option>
<span>8:00</span>
<span> (1 hour)</span>
</option>
Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?
From the HTML 5spec:
Content model:
If the element has a label attribute and a value attribute: Nothing.
If the element has a label attribute but no value attribute: Text.
If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
If the element has no label attribute and is a child of a datalist element: Text.
So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.
From the HTML 4.01 spec:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)
An option element cannot have any child elements. So yes, it is bad.
You can use a Javascript plugin to overcome this limitation. For example jQuery plugin "Select2" Select2 plugin homepage. I use it in a couple of my projects and think that it's pretty flexible and convenient.
There are a number of them, but they do quite same thing - convert traditional <select> into <div> blocks with an extra functionality.
The option element
Content model: Text
No, it’s not ok. Consider keeping the values around in your script so you can recompose them when necessary.
You're better off using an HTML replacement for your <select> if you want to do this.
As established by other people, and I have tried with <b> and other tags, <option> does not take tags within it.
What you can do, since you cannot use <span> inside an <option> tag,
You can use the index number to extract the text via
document.getElementById(selectid).options[x].text where x is the relevant index, as a variable.
Then what you do is use the " (" to split the variable into the time, and remove the last character as well which removes the ")"
Sample:
<script type="text/javascript">
function extractSelectText()
{
var text = document.getElementById("main").options[1].text
/*
var tlength = text.length
var splitno = tlength - 1
var text2 = text.slice(0, splitno)
var textArray = text2.split(" )")
var time = textArray[0]
var hours = textArray[1]
}
</script>
Changing it is much simpler:
<script type="text/javascript">
function changeSelectText()
{
/* add your code here to determine the value for the time (use variable time) */
/* add your code here to determine the value for the hour (use variable hours) */
var textvalue = time + " (" + hours + ")"
document.getElementById("main").options[1].text
}
</script>
If you use a for function you can change each value of the select replacing 1 with 2, 3 and so on, and put a set interval function to constantly update it.
One option for editing would be to use some fancy pattern matching to update the content. It will be slower and more resource intensive, and depends on how regular the format is, but doesn't require any HTML modifications. My concern, however, would be on accessibility and the user experience. Having values change is hard for screen reader software to pick up, and it may also confuse other users.
It is not an answer, but may be it will help sombody, it is possible to mimic select with details tag. This example is not complete, I used javascript to close list on click
const items = document.querySelectorAll(".item");
// Add the onclick listeners.
items.forEach(item => {
item.addEventListener("click", e => {
// Close all details on page
closeList(item);
});
});
function closeList(item) {
document.querySelectorAll("details").forEach(deet => {
if (deet != this && deet.open) {
deet.open = !open;
console.log(item);
}
});
}
details {
border: 1px solid #aaa;
border-radius: 4px;
}
summary {
padding: .5em 0 .5em .5em;
font-weight: bold;
}
details[open] {
}
details[open] .item {
cursor: pointer;
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
details[open] .item:hover{
background-color: #f1f1f1;
}
details[open] .title{
padding: .5em 0 .5em .5em;
border-top: 1px solid #aaa;
}
<details>
<summary>Select your choice</summary>
<div class='title'>
This is attempt to mimic native <code>select</code> tag with html for <code>option</code> tag
</div>
<div class='item'>item 1</div>
<div class='item'>item 2</div>
<div class='item'>item 3</div>
</details>