Printing landscape html->pdf using abcPDF - html

I am trying to get a PDF generated by abcPDF from html output to print the first three pages in portrait and then switch the fourth page to landscape.
I have been able to get the html to switch into landscape for the fourth page by applying this class to a div that is the 4th page:
.PageLandscape {
width="100%";
height="100%";
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
size:landscape;
}
When abcPDF converts the html to pdf though, the 4th page is still portait.
Any thoughts or hints?
thanks!

Not sure if you've found the answer, but here's how I did it. Found it from ABCpdf docs:
http://www.websupergoo.com/helppdf7net/source/4-examples/08-landscape.htm
I think you can apply the transformation per page. But because you set rotation on the document as a whole (when you save) not sure you can do it on a per page basis.

ABCpdf seems to sometimes ignore style-classes.
Maybe you could you try an inline style-element?

Related

GitHub Jekyll: image in the same line as text in preview but not in published version

I'm trying to create a text that contains small images in the same line but this doesn't seem to be possible, at least using Markup. I get a nice preview but then the published version shows images in a new line.
This is the text in my post:
When **p** is true and **q** is true, **p ![and](/assets/and.jpg) q** is also true.
which in the preview shows as I expect it to:
but then, once published it shows like this:
Is there a way to get the images to be displayed as in the preview?
Simply add some css:
img {display: inline!important;}
Better is to NOT use !important, but use the proper specificity. As you are not showing any context, the proper selectors are impossible to guess.

Inputs print without text inside them, but are visible on the screen

I have a problem with a project that I have been working on for a while now. When I open an entry, the inputs all have data in them. However when I go to actually print the entry (using the print-mode, CTRL+P), I notice that the select, and textarea fields are missing the selected or input text on paper. What's going on here? I have googled for hours and can't come up with anything relevant... help! Thanks!
Link to Project (Click "Demo" to create a session - required)
Link to Entry (Click this after you click the 1st link)
Update : Before now I have just been using Google Chrome to test printing. However, when I tried FireFox, it printed alright, is there anything special I need to do to get Chrome to work??...
RESOLUTION : I am using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!
If you're using Internet Explorer, then this discussion thread may help you (summary: IE can get confused when printing malformed docs). Check your doctype tag matches your output (the w3c markup validator is very useful)
Edit - I see you're using chrome, but I suggest you still check your page is well formed :)
RESOLUTION: I'm using jQuery and I found that by removing the ui-corner-all class from the inputs before printing, I could then print. Thanks anyways!

HTML File upload field style

I am trying to create a file upload field that has a little bit of style to it, but I seem to be having problems finding examples of this. I know part of the reason is that the field itself varies from browser to browser.
Any ideas how to do this? Or is there a way to do this without using a file element of a form that can be styled?
If what you mean is the text field for the file names, you can use the input[type=file] selector in the css files. For example :
input[type=file] { background-color: red; }
If what you mean is the file selection dialog box, I think it's browser/OS dependent and there's little (if any) you can do about it.
I have come up on this problem before. Unfortunately, file uploads are nearly impossible to style consistently across browsers. As of CSS 2, I think, the W3C standard specifically leaves behavior undefined--think of how many ways it would need to be implemented on different platforms. Firefox, for example, generates anonymous button and input elements inside the file upload element which only inherit some of the properties that you set on the upload element itself.
You can get some to work using, for example, Furuno's method, but know that the behavior will be spotty and differ widely across platforms/browsers.
Here's some links I found:
QuirksMode Article
One Extra Pixel Article (look for the file input styling section)
This would fit for your requirement.
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
This tiny plugin will display the file input field as a bootstrap button (with configurable classes) and will show selected file names (or selection errors) beautifully.
Additionally you can set various restrictions using simple data-attributes or JS settings.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

HTML link to a certain point in a webpage - slight twist

Here's the use case: A user clicks on a link that opens a window displaying the contents of a text log. Easy enough. But is there a way of using POST, to open that text log to a certain location (i.e., search for a particular timestamp given in the post, and show the file at that specific location)?
(Assume I can't put html tags inside the text log -- it's a raw file).
Template of log:
+++ 2009/06/19 10:47:12.264 ACTION +++
+++ 2009/06/19 10:49:12.111 ACTION +++
So I want the page to load a specific timestamp.
Thanks,
Michael
Why can't you just have a php or perl or simlar script that processes the log file on the spot, and sticks in html anchors and calls it a day?
Doing on the spot processing would also allow you display a trimmed down copy of the log thats only relevant to the timespan around the event in question.
Since you can't modify the file, the only way would be to wrap it in a <frame> or an <iframe> and drive the searching and scrolling from JavaScript in the neighbouring/containing page.
Here's an example, which you can try out online at http://entrian.com/so-container.html
<html><head><script>
function go() {
// "line" is the <input> for which line to jump to; see the HTML.
var line = document.getElementById('line').value;
if (document.body.createTextRange) { // This is IE
var range = frames['log'].document.body.createTextRange();
if (range.findText(line)) {
range.select(); // Scroll the match into view and highlight it.
}
} else { // Non-IE. Tested in Firefox; YMMV on other browsers.
frames['log'].find(line); // Scroll the match into view and highlight it.
}
}
</script></head><body>
<input type='text' size='5' name='line' id='line' value='10'>
<button onclick='go()'>Go</button><br>
<iframe name='log' width='100' height='50' src='so-data.txt'>
<!-- so-data.txt contains the numbers 01-20 on separate lines -->
</body></html>
I've tested that in IE7 and FF3; I'd be surprised if it worked elsewhere without edits, but you never know your luck!
Obviously in your case you'd be driving the scrolling programmatically rather than via an <input> box, but you can see how it would work for you.
If you could put some tags around the file's text, then you could probably insert some javascript that would scroll the window after loading it.
Yes, but passing your parameters via a querystring would be a whole lot simpler.
To scroll to a certain position in the text file you will need to user javascript (overly complicated in my opinion) or add an html anchor tag.
If you were planning to post the raw text log in a window, you will also run into some difficulty as HTML will not recognize the newlines and run the log together into one blob.
have you tried
window.open ('log.txt');
window.scrollTo (0, window.scrollMaxY);
? From mozilla reference : https://developer.mozilla.org/en/DOM/window.scrollMaxY
Keep a 'living copy' of the log file that has been translated to HTML - every time the original file is modified (or simply every X seconds), check for and append the newest lines with HTML anchors applied to the HTML version.
A new feature was added to Chromium waaaaay back in 2020 that allows you to link to ANY location on any webpage.
At the time of this writing, it works for sure in Chrome and Opera but not yet in Firefox, Safari or Brave browser.
The trick is to add:
/#:~:text=
and follow the equal sign with the desired search text, replacing any spaces with %20. Example:
There is no ID near this location on the page
<div>IMPORTANT: Use Opera or Chrome to open above link</div>
For more information:
Linking to a specific part of a web page

How to display simple HTML in a Silverlight textblock?

I've got a source of data that has HTML tags in it (B, I, A) and need to display this in a Silverlight ListBox.
Searching around it seems to be an issue but most of the posts are old and have to do with Silverlight 1 it seems.
What is currently the best way to display simple HTML with Silverlight, if nothing else, just the B, I and A tags for bold, italic and hyperlinks?
There's no native support in Silverlight 2.0. However, someone has gone and created a HtmlTextBlock control which should be suitable for your purposes. Check out the author's block post on the subject. There's also a demo page here.
If you want to do it just in XAML:
<TextBlock>
Text: <Italic>italic</Italic> and <Bold>bold</Bold>
</TextBlock>
the &#160 is an antity for space. The result is:
Text: italic and bold
This comment system is wacky. I added 2 comments last night. After adding the second one, I could still only see the first one. This morning, after clearing browser cookies, I only see my second one. Wierd.
Anyway, I had a problem with the control where I had its Html property bound, and it was appending html every time the property changed. I fixed it by adding the following to the top of the ParseAndSetText() method:
this.SelectAll();
this.Selection.Text = "";
I also had a problem where an exception was being thrown when the DOM parsing routine failed, and I fixed it by changing:
Xaml = null;
with
this.SelectAll();
this.Selection.Text = "";