I am using the d3 framework and I am trying to specify the font the following element using css (I want to use a custom font, that is why I am using css).
var anchorNode = svg.selectAll("g.anchorNode").data(force2.nodes()).enter().append("svg:g").attr("class", "anchorNode");
anchorNode.append("svg:circle");
anchorNode.append("svg:text").text("test");
I tried using
text {
font: 2px Arial;
pointer-events: none;
}
but this does not work for this specific text. I am assuming it is because the text is appended to the node. What would be the correct syntax to access the text in css?
Do you have a link to the rendered HTML or a jsfiddle?
It looks like your appending a class called anchorNode. You could possibly updating the CSS font for that class:
.anchorNode {
font-family: "Times New Roman", Times, serif;
font-size: 2px;
}
Related
I’m having issues with multiple replacements, I am wanting to replace the three words of a company name throughout the website with the company colours, I really don’t want to go through and manually add a span for each of the three words individually although I know this would work, is there anyway of doing this with code? BTW I’m a novice at JS/JQuery, etc.
I have had a go I can get one to work but when I try to do more than one only the last one works, it seems as though the last one cancels out the others.
I am happy enough with the CSS as this can easily be changed later.
Here is my code. - http://codepen.io/TechieBloke/pen/dMmNRB
var text = $('div').text().replace(/dummy/g, "<span class=artblack>dummy</span>");
$('div').html(text);
var text = $('div').text().replace(/Ipsum/g, "<span class='artgrey'>Ipsum</span>");
$('div').html(text);
var text = $('div').text().replace(/Lorem/g, "<span class='artred'>Lorem</span>");
$('div').html(text);
And here is the accompanying CSS
.artblack {
color: orange;
font: 15px arial, sans-serif;
}
.artgrey {
color: blue;
font: 15px arial, sans-serif;
}
.artred {
color: red;
font: 15px arial, sans-serif;
}
You modify the html each time, but then go back to text to use as source for the next change; just be more consistent and use html() instead:
$('div').html().replace()
How to use multiple font face in single textarea?
Example:
<style>
#font-face {
font-family: 'MULLAI';
src: url('MULLAI.woff') format('woff');
}
.tamil {
font-family:MULLAI;
font-size:18px;
}
.english {
font-family:"Times New Roman", Times, serif;
font-size:13px;
}
</style>
<textarea><a class="english">Hello</a>,<a class="tamil">ïH¥Õ£L</a></textarea>
I am expecting the output should be
Hello வணக்கம்
Actually i need to include multiple languages in single text area. I tried lots of jquery editor. But its not supporting multiple languages in single textarea.
Please help me to resolve this problem. Thank you in advance.
You cannot do it. DOM cannot be insert to textarea element. You can use content editable for it. Also you can find more information here.
I am trying to figure out, how can I create some DOM elements, for example a <div> so I can use it as a special code placeholder. (Not the default <code> tag)
For example, I use <div>'s (with some class) and any words in that <div> that are like, keywords in some programming language, they will change color automatically - depending which sort of keyword they are; string, number, function etc.
Here's an example
That page has multiple <div>'s and all keywords in them are in some special color.
How can I make that?
Well, it's fairly straight-forward - FIDDLE.
The variations on the theme are truly infinite.
CSS
.bigred {
font-size: 21px;
color: red;
}
.littlegreen {
font-size: 16px;
color: green;
}
.blueitalic {
fond-size: 18px;
color: blue;
font-style: italic;
}
I'm trying to create a page which uses java script to get data via PHP and then display it using a custom font declared in a CSS style sheet.
The entire page should use one custom font which I have declared in the main CSS file using #font-face like so:
#font-face {
font-family: 'bauhaus';
src: url('fonts/Bauhaus.woff') format('woff'),
font-weight: normal;
font-style: normal; }
My HTML file looks like this:
<html>
<head>
<script type="text/javascript" src="resources/raphael-min.js"></script>
<script type="text/javascript" src="resources/index.js"></script>
<link href="Main.css" rel="stylesheet" type="text/css">
<style type="text/css">
#canvas_container {
width: 100%;
border: 1px solid #aaa;
font-family:'bauhaus', "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div id="canvas_container">FONTTEST</div>
</body>
</html>
Within the index.js I can create text objects using Raphaeljs' syntax like so:
var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});
If I do it like that no 'Test123' text appears at all (I assume because it can't find or use the style 'bauhaus') and if I remove the font-family attribute it shows me text using the browser's default style which in my case is Arial.
The 'FONTTEST' text on the other hand is displayed correctly using the correct #font-face Font.
Now my question is how to automatically have text created by Raphaeljs (or other Javascript libraries) follow the style declared by the CSS statements? I like using custom fonts but I can't find a proper solution on how to easily use the stylized text with Javascript.
Thanks for your help!
Rather than writing out your CSS attributes in-line in your JS, why not change your CSS at the top from #canvas_container to .canvas_container , and then put the attribute "class='canvas_container' " on all of your elements which you want that font on? Should be easier to specify the class attribute than the style attribute.
An even better approach, if you want the entire page to use your font, would be to put this in your CSS (in your case, the style element):
html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }
That will make all HTML and BODY elements use your font unless later overwritten.
Well, after a bit of searching through Raphael's code I found it automatically sets its own font style (Arial) on all its text elements. I don't think that really makes sense, especially since I couldn't figure out on how to override it with a CSS '#font-face' font, but ok.
My solution was to simply delete the automatic setting of the font attribute in Raphael's source code.
For anyone interested, it's in the part where theText is declared. Just delete the font: availableAttrs.font bit in res.attrsand everything will obey the CSS style you want.
You need to register the font with cufon. See http://raphaeljs.com/reference.html#Raphael.registerFont and https://github.com/sorccu/cufon/wiki/about.
You can assign the style of your text explicitly not thinking about what really does.
Write a specific styler object function like:
function Styler( style )
{
this._style = style;
this.get = function( text)
{
return "<span style=" + this._style + "'>" + text + "</span>";
}
}
and then use everywhere:
myStyler = new Styler( 'font-size: 20px; font-weight: bold' );
...
text1 = myStyler.get( "text1" );
text2 = myStyler.get( "text2" );
This is my normal css to apply :
<h3><strong><span style="color: #3399ff;"></span></strong></h3>
I wish to apply that style above to these js elements:
$('#no_tax_price').text("$"+no_tax_price.toFixed(2));
$('#tax').text("$"+tax.toFixed(2));
$('#tax_price').text("$"+(no_tax_price+tax).toFixed(2));
If you define your styles in CSS rather than HTML, your new elements will automatically take on the styling - no JS required.
#no_tax_price, #tax, #tax_price {
font-size: 18pt;
font-weight: bold;
color: #3399ff;
}
Normally I wouldn't use <h3><strong><span> to apply styles (instead just use a single class with the right CSS properties defined), but a quick fix is to just wrap those elements around the contents of your "jQuery elements":
$('#no_tax_price, #tax, #tax_price')
.wrapInner('<h3><strong><span style="color: #3399ff;"></span></strong></h3>');