I'm trying to display text using the Markup tool of Autodesk Forge Viewer 7.84, but the font-size style is being ignored. It works when I add a css style for font-size to the <text> element, but the font-size attribute of the <text> does not work.
This is the code to activate the tool:
var toolInstance = new Autodesk.Viewing.Extensions.Markups.Core.EditModeText(this.core);
this.core.changeEditMode(toolInstance);
var markup = this.core.getSelection();
var style = markup ? markup.getStyle() : this.core.getStyle();
style['font-size'] = styleValue;
this.core.setStyle(style);
Also tried this other code from another question:
markupExt.enterEditMode();
var text1= new Autodesk.Viewing.Extensions.Markups.Core.CreateText(markupExt,2333,
{x:10,y:10}, {x:100,y:100},'My Test String Small', {"font-size":5})
text1.execute();
Both options generate the correct element with the 'font-size' attribute set to the correct value, but the size of the text markup is not applied.
But if I edit the <text> and add a style rule to the element, it works:
I don't want to create an extension or an override to the Markup scripts just to correct the text, by adding the style rule to every <text> element, as I think there is something wrong with either the Markup code, or somewhere on the Viewer/page setup (although the SVG specifications for <text> state that font-size should work).
So the question is: how can I set the font-size of the text in Markup from code, preferably without overriding Viewer scripts?
The issue was a conflict with an old version of the NV.D3 library (to create charts and graphs). The CSS file nv.d3.css had a style rule for all svg text, which ended up overwriting the svg text from the viewer. Updating the NVD3 library solved the issue.
The old one had this, which applied to all svgs on the document:
The updated one encapsulated it in its own namespace:
Make sure no other CSS has global rules to SVG, since it can conflict with the Markup tools of the Viewer.
Related
I have an SVG <filter> defined in the HTML document body, which I use to apply a texture to other elements via their respective CSS filter: rules. Everything works correctly. ✨
Is there any way to set the <feTurbulence> element's seed attribute via the CSS at the point the filter is applied, so that I could provide a CSS counter as the value?
I know how to do this via JavaScript; I'm wondering whether it's possible via HTML/CSS/SVG alone.
Thanks!
I'm looking for a way to use a pure CSS selector (not script) to select an element's attribute, not the element itself. I know XPath can do it but can a CSS selector?
Example, given:
<img alt="image" src="photo.jpg">
Can I get to the src attribute with a CSS selector?
Update:
I don't want to set any element's values, I just want to select the text "photo.jpg".
Because CSS selectors originated as a fundamental part of CSS, and CSS can only apply styles to elements (since attributes are just element metadata, not standalone objects), CSS selectors cannot match attributes alone within CSS.
But I suspect you're not actually asking about CSS here. You're asking about selectors alone. You're probably using a web automation tool such as Selenium or one of the numerous HTML parsing libraries out there that support either CSS selectors or XPath. Some of these libraries support non-element selectors in the form of pseudo-elements such as ::attr() (I don't remember which ones), you haven't mentioned which tool you're using so I can't tell you for sure if you could use it. Note that this is not the same thing as the CSS attr() function mentioned in the comments — that is a CSS function, which is a value, not a selector, and therefore it cannot be used in a selector.
But if your library doesn't have such a feature then you'll need to either select the img element directly and query its src attribute separately (again, how you do this depends entirely on what you're using, which is why it helps to be specific about this sort of thing), or use XPath if possible.
CSS Tricks has an article that I believe answers your question:
https://css-tricks.com/almanac/selectors/a/attribute/
If you are trying to set the value of a certain element attribute using css, I'm pretty certain that is impossible for anything other than the content property.
CSS is not a programming language and can't process data.
Its sole purpose it to tell the browser how a certain element should look like, like in coloring a text red.
To process data in a web page you use javascript, which can make use of CSS rules though, to grab a certain type of elements in a web page, for example this, which will return a list of all elements of type img
var imglist = document.querySelectorAll('img');
Now, having a list you can loop through it and get each src like this
Array.prototype.slice.call(document.querySelectorAll("img")).forEach(function(img) {
var imgsrc = img.src;
// imgsrc now holds the image url, in your case "photo.jpg"
});
I have a viewer tab which shows a complete HTML document fetched from the server. The application has a css[main.css] which is applied to all the elements on the screen.
If we apply this to the HTML document shown in the viewer then we loose some formatting like the table border disappears. So we do not want the application's main.css
to be applied to the viewer content. We want to show the document as is.
I see CDATA can be used to do this . The content inside the viewer is wrapped under <div class="ap-mainPanel ap-scrollPanel"> so I want to escape all the content inside
the <div class="ap-mainPanel ap-scrollPanel"> from being rendered using main.css
<![CDATA[
<div class="ap-mainPanel ap-scrollPanel">
</div>
]]>
Not sure how do we specify that we want everything inside the <div class="ap-mainPanel ap-scrollPanel"> to be escaped from applying the main.css
You have 3 main options:
show that tab in <iframe> - as it not accepts parent document
styles
re-apply in main.css rules that will clear content's in
.ap-mainPanel, kind of "css reset"
or predefine already defined rules in main.css to not be applied
in your panel (not() pseudo-class)
You cannot exclude CSS from a part of an HTML document. This has been asked several times at SO, unfortunately mostly with wrong answers given.
If you use a style sheet for a page, or set of pages, you need to design it so that it actually does just what you want. This may require considerably more complicated selectors than you are currently using.
Alternatively, you can display the content as a separate document, as embedded into your main document using iframe (or frame or object, but iframe is usually the most handy). A document displayed in an iframe is rendered independently: only its own style sheets affect the rendering, not the “hosting” document (except that the “hosting document” sets the size of the rendering area and its position).
CDATA sections have nothing to do with this. They disable HTML parsing rules, turning markup to plain text. You don’t want that here.
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
I use CKEditor for my text editor, when client edit a text with CKEditor and change the font color, font size and ... I store the HTML code in my database and there is no problem.
but when I want to show the HTML Code in my page, the style will reset so many html tags not work, like font size or font color and ...
I use Eric Meyer’s “Reset CSS” 2.0 :
http://meyerweb.com/eric/tools/css/reset/
this is CKEditor WYSIWYG screenshot :
This is CKEditor HTML Code :
And this is result :
and this is firebug screen shot for this layer style :
I need to un-reset the CSS for this layer, is it possible ?
You may consider using http://binarystash.blogspot.com/2014/01/unresetcss.html. It restores default HTML styles removed by Eric Meyer's reset.css.
You should be able to do this with the CSS :not selector, by resetting all the elements that are not within the WSYIWYG Editor code.
Or, if you have control over the styles, you could an !important declaration on the editor styles.