I'm using Flying Saucer 9.0.9 (it's the same on 9.0.8) and I'm getting strange behaviour when using a custom font using the "IDENTITY-H" encoding. When using this encoding I'm getting blury and out of line character throughout my pdf. When using Arial Unicode MS font everything work like expected (but I can't use it due to licensing issues), with any other font I had no success. The result using FreeSans:
How I'm adding the font:
ITextRenderer iTextRenderer = new ITextRenderer();
ITextFontResolver iTextFontResolver = iTextRenderer.getFontResolver();
iTextFontResolver.addFont("templates/FreeSans.ttf", BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
The HTML:
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
font-family: FreeSans;
}
</style>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<p>Test Great White Fox Jumps Over The Hedge?</p>
ĐĕĞĦķŔŶ
</body>
</html>
How I'm creating the pdf:
iTextRenderer.setDocument(new File(getClass().getClassLoader().getResource("templates/test.html").getFile()));
iTextRenderer.layout();
final FileOutputStream fs = new FileOutputStream("C://temp//temp.pdf");
iTextRenderer.createPDF(fs);
When using a diffrent encoding (for example: WINANSI) the first line of text is rendered correctly but obviously the second line isn't. I really need to be able to create UNICODE (IDENTITY-H) PDFs.
You can download the result pdf using the link below:
download pdf from dropbox
Any help is greatly appreciated.
UPDATE:
Apparently this had nothing to do with iText or Flying Saucer. Our Maven build builds a single fat jar, the font is also included in this jar. But during the copy from the file system to the jar the font got corrupted.
Apparently this had nothing to do with iText or Flying Saucer. Our Maven build builds a single fat jar, the font is also included in this jar. But during the copy from the file system to the jar the font got corrupted. Excluding the font from filtering solved the issues.
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
<excludes>
<exclude>templates/font/*.ttf</exclude>
</excludes>
</resource>
<resource>
<directory>src/main/resources</directory>
<filtering>false</filtering>
<includes>
<include>templates/font/*.ttf</include>
</includes>
</resource>
</resources>
Related
I'm using VS Code + js-beautify + Beautify css/sass/scss/less, and I'm facing couple of annoying issues when I format my code (don't know how to solve them):
This is NOT how I want my background color to look.
From:
background-color: rgba(0, 0, 0, .0);
To:
background-color: rgba(0,
0,
0,
.0);
I want it to be format as one line (like "from").
The "cursor" property is in different color
When I format my html code, there are line spaces in the body and the html.
From:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
To:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
I want it to be formatted without any empty spaces (like "from").
You can change format settings in VS Code's settings.json file. By default, head, body and html tags include a newline before them. If some issues started happening only after installing an extension, then there may be conflicting settings.
While this is an old question, I was encountering the same issue and found the solution. In your VS Code settings.json, add the following to it:
"html.format.extraLiners": "",
By default nothing is there so it will default to html, body, /html. By setting it to nothing, it will give you the behavior you want.
I have already asked such a question here but haven't got a reply which could work out. It is really important for me to resolve the problem. So, I try to develop an app using ExtGWT 2.3.0 / GWT 2.5.1 but faced the problem that widgets (both GWT and GXT) are not visible in browsers. I've been trying to solve this issue more than week but unfortunatelly I've failed. The stuff I have alredy tried:
using different libraries of GWT/GXT (using ExtGXT 3.x doesn't settle a problem);
creating project using Maven web-app / gxt3+ archetypes;
deploying project on Tomacat / lunching under GWT;
using different styles in GWT-module (like <inherits name='com.google.gwt.user.theme.standard.Standard'/>);
rewriting .css-file;
compiling project by Maven / GWT compiler;
cleaning up cache files in all relevant temp directories (as Windows' as well as Intellij IDEA's);
making Maven's clean install;
using different browsers of different versions (IE 8 and 11, Chrome, FF 24 and 36);
trying to lunch app in browsers with / without GWT developer plugin;
browsing internet to find solution (especially stackoverflow);
Maybe I left out smth but the list of actions is pretty much big.
By the way I logged actions and there were no any errors or exeptions thrown. If I declare border settings for the widgets in .css their borders become visible that testifies that widgets are on page. So, if anyone has experienced such a problem or just could suggest something please let me know. Frankly it is very important for me. Please take a look at screenshots of the folder structure / setting of the project. Thank you in advance.
EntryPoint - class
public class ProjectEntryPoint implements EntryPoint {
#Override
public void onModuleLoad() {
Viewport viewport = new Viewport();
final BorderLayout borderLayout = new BorderLayout();
BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 20);
northData.setSplit(false);
northData.setCollapsible(false);
BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setCollapsible(false);
BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200, 150, 300);
westData.setCollapsible(true);
westData.setSplit(true);
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
HTML headerHTML = new HTML();
headerHTML.setHTML("<h1>RSS Reader</h1>");
viewport.add(mainPanel, centerData);
viewport.add(navPanel, westData);
viewport.add(headerHTML, northData);
viewport.setLayout(borderLayout);
viewport.layout();
RootPanel.get().add(viewport);
}
}
module
<module rename-to='Project'>
<inherits name='com.google.gwt.user.User' />
<inherits name='com.extjs.gxt.ui.GXT' />
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<entry-point class='GXT3App.client.ProjectEntryPoint' />
<source path='client' />
<source path='shared' />
<add-linker name="xsiframe" />
</module>
.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="gxt-all.css">
<title>Project</title>
<script type="text/javascript" language="javascript" src="Project/Project.nocache.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
.css
.mainPanel {
border: 1px solid black;
}
.navPanel {
border: 1px solid black;
}
It looks like a problem with missing styles - please double check that gxt-all.css is available from where you reference it in your host page. Use your browser's developer tools to see if it's not throwing a 404.
It seems that the missing resources are mentioned in Step 1 in the setup.txt file that is bundled with GXT 2.3:
Create a Google Web Application Project project within Eclipse.
Copy the contents of the /resources folder in the download to a {foldername} location within your war folder.
Substitute {foldername} with the name of the folder you've created for resources within your war folder.
Add the following stylesheet to your host page.
<link rel="stylesheet" type="text/css" href="{foldername}/css/gxt-all.css" />
If you are using Charts, add the following script to your host page.
Add the following entry to you projects module xml file.
<inherits name='com.extjs.gxt.ui.GXT'/>
Eclipse Setup (should be similar for other development environments). These instructions assume you have a existing project and launch configuration.
Add gxt.jar to the project.
Add GXT jar to launch configuration.
This surely can't be the answer, but you have a typo in your code :
ContentPanel mainPanel = new ContentPanel();
mainPanel.setStyleName("mainPanel");
ContentPanel navPanel = new ContentPanel();
mainPanel.setStyleName("navPanel");
where the last line (I think) should be
navPanel.setStyleName("navPanel");
I solved the issue. I wouldn't say that it is an elegant solution but it works.
As discussed above the problem was in absence of .css-file which defined selectors that described widgets' styles (gxt-all.css). When creating project be sure that the following folders with relevant files are presented in project's webapp-directory (in the case you use Maven's web-app-archetype):
chart
css (contains gxt-all.css and gxt-grey.css)
desktop
flash
images
themes
All that stuff you can find in GXT installation archive in the folder resources. To use it just put all that folders in your project and define path to gxt-all.css in your host-html. It works for GXT 2.x.
I'm building a responsive HTML creative template to serve a full screen ad. The ad is displayed on a mobile device, running iOS 6-7, using version 6.8.0 of the DFP SDK. I noticed that when serving an ad with my template, DFP wraps my HTML with extra html/body tags (see comments below):
<!-- the code below is from DFP -->
<html><head>
<meta name="viewport"content="width=device-width,height=device-height,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
</head><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<!-- my code starts here -->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
...
<!-- my code ends here -->
<!-- the code below is from DFP -->
</body></html>
The issue I'm having is that height=device-height from the injected HTML code makes my ad scrollable. My ads are displayed in landscape and for unknown reason device-height and device-width default to a same value - the device width. The HTML above is not valid because nested html/body tags and I can't control the viewport definition to remove the erronous height=device-height.
Questions:
Is there a way to suppress DFP generated wrapping HTML (<html>...</html>) and rely on my code to supply it (so I can supply my own viewport)
Any clues why landscape view of the ad defaults both width and height to the device width
I ended up using Javascript to update the header:
<script type="application/javascript">
var meta = document.getElementsByTagName("meta")[0];
meta.setAttribute("content", 'width=device-width,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0');
</script>
I'm trying to use DockLayoutPanel in Jboss-errai application.
My entry point class:
#EntryPoint
public class Application {
private Caller<UserService> userService;
private Label registerConfirmMessage;
#AfterInitialization
public void createUI() {
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.addNorth(new HTML("header"), 2);
p.addSouth(new HTML("footer"), 2);
p.addWest(new HTML("navigation"), 10);
p.add(new HTML("content"));
RootLayoutPanel.get().add(p);
}
My Application.gwt.xml:
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.4//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.4/distro-source/core/src/gwt-module.dtd">
<!-- GWT module definition: the rename-to attribute is used to have a shorter
module name that doesn't reflect the actual package structure. -->
<module>
<inherits name="org.jboss.errai.common.ErraiCommon" />
<inherits name="org.jboss.errai.bus.ErraiBus" />
<inherits name="org.jboss.errai.ioc.Container" />
<inherits name="org.jboss.errai.enterprise.CDI" />
<inherits name="org.hibernate.validator.HibernateValidator" />
<source path="client" />
<source path="shared" />
</module>
I detected different result when I change DOCTYPE. So:
In IE6 it works with either doctype
<!DOCTYPE HTML>
Blank page in Mozilla Firefox 14, Chrome
<!DOCTYPE>
Blank page in FF14, but it works in Chrome.
All other doctypes result in blank page.
Advise me please correct solution!
From the documentation:
This widget will only work in standards mode, which requires that the
HTML page in which it is run have an explicit declaration.
So that means that:
1.The browser needs to be running in standards mode, and not in quirks mode.
2.In the beginning of your HTML file you should have this:
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
The doctype is defined in the HTML page where the application starts.
and not the gwt.xml
Also check the the link below, it describes how a gwt project is organized:
https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects
I'm trying to get an SVG image to show up on my iPhone (or iPad) default browser, but I can't seem to get even just a rect to show up.
Example at: http://www.invalidpage.com/svg/svgtest.html
Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>SVG iPhone Test</title>
</head>
<body>
<div>
<svg width="500" height="220">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
</div>
</body>
</html>
Add xmlns="http://www.w3.org/2000/svg" version="1.1" to your svg tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>SVG iPhone Test</title>
</head>
<body >
<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
</body>
</html>
The HTTP MIME type being delivered by http://www.invalidpage.com/svg/svgtest.html is
"Content-Type: text/html". HTML inline svg works with the MIME type "Content-Type: text/xml" You can create this by ending the document with XML instead of HTML as they have done here.
Not sure if Ipad cares about the Content-Type but other browsers do.
Updated
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Can also be used; It is what is being shown on the Ipad svg examples. When the document is delivering as an XML not HTML, it should start with <xml version="1.0" standalone="no">;
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect>
</svg>
Figured I would tack this on here, though it's mostly just related to the title.
I had my SVG tag rendering everything properly in every browser (even IE9+), except for iOS. I had the css height of the svg set to 100%, which worked everywhere, but on iOS it appeared to be 100% of the height of the entire page, instead of just its parent element! This was causing my inner SVG elements to render outside of their viewport.
Adding a position: absolute to the svg tag fixed my issue and it rendered properly on iOS and everywhere else (the parent element was already positioned, so this didn't change the actual position of the svg). Other position styles may also work.
I have had this problem before too with mobile Safari. What you can do is load the SVG into the the DOM via javascript:
$(document).ready(function(){
var svg = '<svg width="500" height="220" xmlns="http://www.w3.org/2000/svg" version="1.1"><rect x="2" y="2" width="496" height="216" stroke="#000" stroke-width="2px" fill="transparent"></rect></svg>';
var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));
$('body').html(chart);
);
That's just an example - obviously you're not going to store your SVG in a string like that in practice.
You could retrieve the SVG string from the server via ajax, and then load into the DOM using the above approach if you wanted.
I also had a problem displaying large SVGS (dimensions) in IOS browsers. By scaling it down I did get it to work.
I think around 1000px and down will do it..
A friend of mine told me it perhaps had something to with Integer Limits for IOS.
http://msdn.microsoft.com/en-us/library/7fh3a000.aspx
Mixing SVG tags with HTML tags without using a well-formed XHTML document and namespaces (see Wayne's answer) is not supported in Safari for iOS 4.2.1 and earlier, nor is it supported in Safari 5.0.x and earlier on Mac OS X and Windows.
Including SVG tags within an HTML document is a new feature of HTML5 parsers. If you download and run a nightly build of WebKit for Mac OS X or Windows, you'll see that your test case works as expected.
Even with all the other advice on this page I couldn't get it to work (even in Safari).
So I found a working example at:
http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg
and copied the file to my own site. Still no luck, so I had a look at that file and my own using Rex Swain's HTTP viewer:
http://www.rexswain.com/httpview.html
The difference became obvious. My svg was being served as text/html, and the Starbucks logo was being served as image/svg+xml.
The solution was to change the header by adding:
addtype image/svg+xml .svg
to the .htaccess file.
have you tried to embed it inside an <object> tag.
<object type="image/svg+xml" item-prop="image" id="[give any id]" data=" [mention your file name] "></object>
e.g
<object type="image/svg+xml" item-prop="image" id="svgImage" data="images/svgImage.svg"></object>
I think this should do the trick!