Just wanted to know if it is possible to change the font,color,font size while parsing html to pdf using xmlWorker.parser
Currently I am able to parse whatever I have given as the input.So I wanted to change the font,font size, font color etc if possible.
Thank you
You can create your own CSS style and add it to your HTML code. The CSS style will be applied according the priority given below where no 4 is the higher priority.
1)Browser default
2)External style sheet
3)Internal style sheet
4)Inline style
Example:
document.open();
String finall= "<style>h1{color:orange;} </style><body><h1>This is a Demo</h1></body>";
InputStream is = new ByteArrayInputStream(finall.getBytes());
XMLWorkerHelper.getInstance().parseXHtml(pdfWriter,document, is);
document.close();
In the Example Orange color will be set to the header.
Related
So I've got this dropdownlist and I want to change the whole websites background color using it.
This is my MasterPage body:
<body style="overflow: auto;" runat="server" id="bodyMasterPage">
And I'm trying to set the background like this.
var body = Master.FindControl("bodyMasterPage");
if (ddlColor.SelectedValue == "Green")
{
body.Attributes.Add("background-color", "Green");
}
But when I try add the Attributes to the body, I get an error saying:
"Control does not contain a definition for 'Attributes'..."
So my question is, how should I go about actually changing the background color of the MasterPage from here?
The compiler is telling very well exactly what kind of error you are dealing with, Master.FindControl returns an object of type Control which doesn't an Attributes property. Control objects, however, can be casted to a specific type they correspond to. In our case HtmlGenericControl can do the job.
You have to include the appropriate namespace first by adding the following line on top of the page:
using System.Web.UI.HtmlControls;
And then you can adapt your example with this:
var body = (HtmlGenericControl)Master.FindControl("bodyMasterPage");
body.Attributes["style"] += " background-color: green;";
Be careful how you are using the attributes, what you have shown in your code would have created an attribute of type background-color with value Green, and what you really want is either add a class to the body or directly access the style attribute like I did but adding your value to it.
I specifically used the addition assignment operator, in case you have any other styles on the body so you don't overwrite them and just include your change. However if you want to completely rewrite it you can change it around or use your approach with proper attribute name (style).
Can I edit a HTML-tag's CSS using DART?
I have done some searching but I couldn't really find out how to do it, or if it even is possible.
The reason to do this because I would like to change a button's location on a page.
You can change or view css properties through Element.style. The Element.style is an instance of CssStyleDeclaration. You can do the following:
Element element = document.querySelector("div")
..style // edit any of the properties of this variable
..style.background = "orange";
I guess you are looking for something like
var el = document.querySelector('.somediv');
// or '#someid' or other CSS selector to get hold of an element
el.style.color = 'blue';
You may want to look at the dart class CssStyleSheet which can grab a sheet and delete, insert and add rules. You need to know the index of the rule in the style sheet.
I need to specify a different color for each character of the text in an HTML page. The text is long and the generated HTML file size should be as small as possible. In other words, the color formatting tags used should be as minimal as possible. How do you suggest to perform this task?
You need to wrap each character in an element, so it seems that the minimal code is like
<a style=color:#123456>x</a>
or alternatively
<font color=#123456>x</font>
for each character x. The codes are of equal length, but in the latter, the number sign '#' can in practice be omitted (it is an error to omit it, but by browser practice and HTML5 drafts, there is error handling that effectively implies the # provided that the value does not constitute a color name known to the browser. This is risky, so I would go for the first alternatively.
If the colors are not in fact all different but may repeat, then the use of
<a class=¿>x</a>
together with CSS definitions like
.¿{color:#123456}
could result in shorter code. You would then need a class name generator; you could keep the class names to single characters, but care would be needed to make sure that the class selectors will conform to CSS syntax.
I can't realy tell if there is a way to do it into CSS
but here is my code in JavaScript
var textID = document.getElementById("text"); // go and take the Text from the ID
var text = textID.innerHTML; // Take the text from the
var toChange = text.split(""); // Separrate each letter into array
var newText = ""; // buffer text
var aClassName = ["red", "green", "blue"]; // class name that you want
var colorNumber = 0; // counter to loop into your class
for (var i=0, ii=toChange.length; i<ii; i++){
if(colorNumber == aClassName.length){ // if you reach the end of your class array
colorNumber = 0; //Set it back to 0
}
// Add between each letter the span with your class
newText += "<span class="+aClassName[colorNumber]+">"+toChange[i]+"<\/span>";
colorNumber++
}
// Output your text into the web
textID.innerHTML = newText;
http://jsfiddle.net/WPSrX/
I am taking the chance of attempting to answer this. This is admittedly not a direct answer, but another way of looking at it that would keep your code to an absolute minimum:
If what you want is a sort of non-intrusive watermark; I would suggest the simplest solution to set opacity on the text, and a text-shadow in the css.
You could try something like this:
.myText
{
color: white; (or whatever)
opacity:0.5;
text-shadow:....
}
There is a massive amount of options for text shadow; but here is a generator you can play with.
I suppose you could also generate the two colours via javascript, should you wish to alter the colours depending on the image.
You shared no code so there is nothing I can improve upon so the best that can be done is to show you some shorthand CSS and minimal length CSS classes...
HTML
<span class="r">red</span>
CSS
.r {color: #f00;}
I'm using GWT for create a web-application; by default Google Web Toolkit append your style name.
For example the following code
Anchor myAnchor = new Anchor("Test");
create this HTML
< a href=".." class="**gwt-Anchor**">Test< /a>
Can i remove ALL gwt style name on ALL widget?
In example I want remove gwt-Anchor class, but I don't want run removeStyleName("gwt-Anchor")
Thanks
There's no easy way to do it, no. You have to explicitly removeStyleName(…) or more simply setStyleName("") on each widget.
setStylePrimaryName()
Anchor myAnchor = new Anchor("Test");
myAnchor.setStylePrimaryName("mystyle");
As per docs :
Sets the object's primary style name and updates all dependent style names.
If you don't want to remove the style then apply new style using setStyleName(""). So In your project style sheet file, Define gwt-Anchor style with empty brace which tag already exist in GWT style.
Thus you can inherit same style name with !important keyword in gwt project. it will apply project css. and it will remove all GWT style. so copy style name and paste in your project css. i.e.
style.css
.gwt-Anchor
{
//Any style you want to apply
}
I am creating a website and i want to allow personalization to individual users upto some extent like changing font family, background color etc. The problem with this is that, my default css file that i load has already default classes for everything. Now when i fetch the background color from my database, then if there is null value for background color then default css class of mystylesheet.css should be loaded and if the value is not null, then i want to override this with my default css. How is it possible? Thanks in advance :)
Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.
Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.
The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body
if you have the option of using javascript
<body class="theme-1">
<div class="main"><div>
</body>
Then each of your style sheets should contain the theme name in the declarations:
--theme1.css
.theme-1 div.main {
background-color: #eee
}
--theme2.css
.theme-2 div.main {
background-color: #f30
}
To switch style sheets, you just remove the old theme name and add the theme you want to use.
Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.
New Improved Answer:
I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.
For an example, use firebug and look at
http://www.extjs.com/deploy/dev/examples/themes/index.html
Look for styleswitcher.js and look at the function setActiveStyleSheet
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
EDIT:
Reason for CSS property precedence?
One way is to produce the css file dynamically from a php script.
You would include the file like:
<link rel="stylesheet" type="text/css" href="css.php">
And the css.php file would look something like this:
<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>