Develop Reference

Create PDF from HTML using TheArtOfDev.HtmlRenderer.PdfSharp

I need to convert a well-formatted HTML string to a PDF document.
I found this DLL that should do what I need, but it isn't working fine on formatting.
That's the HTML code I'm trying to convert, and viewing it on browser works fine (I've used Bootstrap CSS, that's been correctly referenced as cdn).
But once converted to PDF this is the result:
And that's the code I'm using to convert it:
string html = "";
if (File.Exists(pathIN))
{
html = File.ReadAllText(pathIN);
}
PdfDocument pdfDocument = new PdfDocument();
PdfDocument pdf = PdfGenerator.GeneratePdf(html, PageSize.A4, 60);
pdf.Save(pathOUT);
Does anyone have any suggestion?

I also had issues with this when using HtmlRenderer/PdfSharp with Bootstrap controlling the layout.
Although it goes against the grain, I resorted to using tables for the layout. Given that the destination (pdf) was a obviously a fixed width, being responsive was not a requirement.

Try using https://wkhtmltopdf.org, works well for bootstrap pages.

I know its a little late but this can help someone
The problem with bootstrap is that to align the columns use float: left and pdfsharp cannot read this property instead use display: inline-block and define the width in pixels.

To avoid useless effort to other people, it doesn't work for Bootstrap like the Table even using display: inline-block to define the width. Right side of table is always trimmed, the size unfitting the letter size in my case.

Unable to decipher DIV tag with CSS

I've got this DIV tag that has a class definition in it.
<div class="clear hideSkiplink">
I've searched the entire project, but I can't find this class anywhere by using the text search feature.
Currently, the DIV is too wide, and I need to trim it down a bit.
Whenever I remove the class="clear hideSkiplink" reference, the DIV tag immediately grows much too large.
I inherited this project after the website developer left. I'm good with C# and WinForms, but not really this web stuff.
Could someone help me out, please?
Solved!
I found .clear { clear: both; } burried in the file StyleSheet.css, but I could not find the hideSkiplink word anywhere in my project.
So, I took the hideSkiplink word off, and the rendered page did not change in the browser.
Apparently, all I was seeing was controlled by the one clear word in the DIV tag.
My tag now reads:
<div class="clear">
Thanks, JLevett!

'clear' and 'hideSkiplink' are too different classes, not one.
Try searching for those individual phrases within your project.

if you have firebug, go to HTML tab, find your element and click on int, I made you a screen of this page as an example, the red circles show the class names and the green circles show you the css source file. You might as well ctrl+click on the source files and they open in a new browser window :)

ASP.NET 3.5 C# : Combine images in one download

I Would like to know if its possible to combine mulitple images in 1 download. On my homepage I'm showing 12 images which change depending on the country of the user.
I notice this takes a lot of time to download for some users and i would like to know if it's
possible to combine them into one download with an httphandler (in the way u can combina js and css) or even create 1 static image out of those 12.
For an example check here

I think you can make pretty good use of CSS Sprites in this case. They're HTML/CSS, so not ASP.Net specific in any way.
The overall concept is instead of many images, you use one large image, to eliminate the multiple round-trips to the server to fetch images. Then what you're doing is showing only a portion of the larger image where needed (as a background to the element), so in your <a>s you'd have something like this for styling:
.channel {
background: #FFFFFF url(SpriteMapUS.jpg);
width: 85px;
height: 55px;
display: block; /* Make the anchor render like a div, no more <img> tag */
}
Then on a particular channel, something like this:
.bloomberg { background-position: 0 0; }
.abcnews { background-position: -85px 0; }
.nasa { background-position: 0 -55px; }
.nasdaq { background-position: -85px -55px; }
//etc for the others...
And a channel would look like this:
Read the article I linked for a full run-down, but those are the overall concepts for sprite maps.

print an asp .net page without considering IE version

I have an ASP.NET site with a print option (onclick = window.print())
the problem is that when using IE 7 it gets fine on the page
but when users using IE 6 print the page they get it larger than the page is

It depends up on the default print settings set on the client machine.
This has nothing to do with ASP.NET.
Also, OnClick = Window.Print() is a JavaScript function which would be executable in the client machine.
You can use the CSS to control the way the page needs to be printed/viewed.
#media print {
BODY { font-size: 10pt }
}
#media screen {
BODY { font-size: 12pt }
}
#media screen, print {
BODY { line-height: 1.2 }
}

You cannot control the printing so you get the same result regardless of client, that's one of the "beauties" of HTML.
IE7 for instance introduced enhanced user-controlled printing options to "fix" some of the problems while printing web sites. This is still in the hands of the user though, and caters for their idea how the page in question would be best printed, and not really something the page itself or web developer can control.
If you need something for controlled print, use a suitable format instead - like PDF (generate it on the fly if needed).

C# - How can I cut a string at its end to fit in a div?

I'm making a list of recent news. So, it will show something like this:
- Take a look at the new Volks...
- John Doe is looking for a jo...
- Microsoft is launching the n...
So, the list above only shows me the title of the news and the length of each news is limited in 25 characters. But, this is not working well... for example, if you type 25 M's, it will explode my div.
I've been told that there is a way to calculate the length of the string and make it fit in a div automatically.
Does anyone know how to do it?
thanks!!

"text-overflow: ellipsis" is what you want but not everybody supports it. More info here...

I think you talking about is using the System.Drawing.Gaphics class's MeasureString() method.
However, this requires making a Graphics object which matches the font characteristics of your web page. But, your server process shouldn't know anything about the style elements of the web page, which should be handled by the CSS sheet.

I think you want to use css for this.
word-wrap:break-word;
should do it

One very simple way to prevent "exploding the div" is to use a css style to set the overflow of the div to scroll or hide the extra text instead of stretching to accomodate it.

I don't think there is an easy way to do this that works with all browsers and fonts.
The best way is just making sure your layout don't break if someone enters 25*m.
An useful thing to do is to split words that are more than X letter.
I the word-wrap css don't work that well on all browers.

This is not really a server-side problem, as the server shouldn't know what fonts people are using. You can do it using Ajax - post the font to the server, calculate the width (as James Curran mentioned), and return the right strings. However, the server may ont have the same fonts installed, and you have to calculate padding and margins on the server side.
I can think of several options on the client side:
Wrap every line with a span. A span would expand automatically to the width of the line. Using jQuery or your favorite javascript you can remove characters until the width is ok. (you can do a sort of binary search, where at every stage you add the ellipsis and checks the width)
Easy - Wrap every line with a fixed-width div and set it overflow:hidden, and add the ellipsis after the div. This will cut through letters though, and when you get a short text it'll still show the ellipsis.
Too easy - Use a fixed width font (they're mostly ugly).

As others have mentioned you can measure strings in thick client applications using System.Drawing.Graphics.MeasureString, but since you mention you want to fit it in an HTML div tag it would be perferable to let the browser handle the user interface using CSS.
<html>
<head>
<title>C# - How can I cut a string at its end to fit in a div? </title>
<style type="text/css">
.ellipsis li
{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 166px;
}
</style>
</head>
<body>
<ul class="ellipsis">
<li>Take a look at the new Volksxxxxx</li>
<li>John Doe is looking for a joxxxxx</li>
<li>Microsoft is launching the nxxxxx</li>
</ul>
</body>
</html>
I used the unordered list tag (UL) instead of div since your sample list begins with a bullet character. Similar CSS would apply to DIV tags. And although all browser can be made to clip the content, not all browsers support the non-standard text-overflow: ellipsis style.