I'm in the process of building a character generator for a role playing game, and I've run into the issue of my formatting not carrying over when I try to print it or convert it to pdf (as shown below). I'm looking for the generator to fit on a single page of letter paper (8.5in/11in). Is it a matter of reformatting the CSS I have to fit those dimensions, or is there a HTML or CSS solution that can amend this?
Related
This is my first ever post. I haven't found much info on this, but essentially I want to preserve the vertical orientation of a text when it is being copied from our webpage into Word.
Our project is an Azure DevOps extension that generates whole documents from work items or "snippets" that can be copied and then pasted elsewhere, if the user wants to fill out a document we don't support. (Otherwise the whole document can just be converted to a pdf by printing it)
In a recently implemented new "snippet" we generate a table that has sideways oriented text in its top row to fit more work item titles. (We need to fit as many as possible, since we are always constrained by how many fit into the print view). However, this sideways orientation doesn't carry over into Word when it's copied and pasted, making the whole table look jumbled and different from what the users would expect.
Is there some CSS styling or trick to make sure that when a text is copied and pasted into word it preserves this sideways orientation?
So far I have tried the "orientation: sideways" styling or rotating the enclosing element, but neither works. If this is not possible at all, that's okay as well.
An example: https://codesandbox.io/s/elastic-babycat-r9izzk
When copying and pasting the table above into Word, the sideways orientation disappears.
SO is probably not the right place for this, but I may have missed a trick with my HTML/CSS.
I have written an application that outputs to HTML, for convenience. The page it produces is big, insofar as it should span multiple pages, both horizontally and vertically. However, unlike spreadsheets, browsers don't seem to do the "across then down" or "down then across" style printing and, if the page isn't shrunk-to-fit, it's just clipped at one page's width.
Short of printing to a custom page size that accommodates the full width and height, is there anything I can do to get the page-spanning printing I'm looking for?
For the problem Landscaping is one method you can try out.
Refer here:- Landscape printing from HTML
But I would recommend to convert it to a PDF before printing which will be more comfortable.
I couldn't find a programmatic solution, so did this:
Print oversized HTML on to paper big enough to accommodate everything (e.g., A0) to PDF.
Adobe Reader (and probably other viewers) have a "Poster Print" option, that does the tiling automatically with an optional scaling factor: Do this, either to PDF if you need to do any further layout processing, or to your printer directly.
???
Profit
A bit of a weak link in my pipeline -- until I can generate tiled PDFs directly -- but c'est la vie!
So I have a PDF brochure that we're trying to create a printable HTML version for.
I'm running into a few obstacles including:
Zoom at 100% vs. Shrink to fit (defaults appear to be different in FF/IE)
Only printing one page and not having any space after the
footer (or even just getting "page-break-after:always" to work)
I have a fluid layout that I'm trying to just use a width: auto on the main wrapper for, but this means not having any kind of width constrictions on the front-end of the HTML page. I don't want to use a min-width or anything. Was hoping since this is page is strictly for print, I wouldn't have to add a print style sheet (just typing this makes me think I pretty much have to...)
Should I just use a fixed layout on the HTML page and a fluid layout on the print page?
I may be over thinking this...
Thanks so much for any help.
I would say make ONE HTML page. Then, create two separate print media CSS files: one for Firefox, the other for IE. Use a conditional comment to read the browser and figure which media print stylesheet to use.
A little bit of work, but it should work for you.
I am looking to convert a clients website into HTML. I'm relatively new as my skills are more directed in the front end of websites (design) so I'm quite lost. The website is allegianceglobalinvestigations.com and if you scroll through it, each page has the same URL. How to I create a HTML file/template from this? I'm assuming that since there are 4 pages, I'll end up with 4 files? Do I need to use OCR for the text?
If you view the source it will show you the urls of the other frames. If you view just that url you can get the source for just that frame. You can use that source all together with some changes if you're trying to just "un-framify" the site. I think that was what you were asking.
There is very little text on there so the only OCR you will need is your eyes and a keyboard if you're trying to use real text on the site.
And yes, you will end up with 4 different files. One for each page.
Good luck with your project, the best way to learn is to dive right in!
This is a frame-based site with a top menu in one frame selecting between four pages in the other frame. The content of each subpage is encoded as a JPEG image in a table.
There are already files for each subpage: content.htm, sis.html, services.htm, and contact.htm. With this low amount of text, you may as well just type the text currently in the images into the body of these files instead of using OCR. Replace everything between <body> and </body> with the text, then use HTML to mark up to the content to your liking.
To eliminate the frames, paste the content of the body element from the menu.htm file into the start of the body element of the four subpages.
I get a .pdf complete with images, fancy fonts, styles, gradients and what have you. Basically it's handed off to me with the message, "Make me a web page that looks exactly like this." I've tried a few pdf to html tools and they all look terrible. I figure I've only got 2 options and i hate them both.
convert the pdf to one big image and use an imagemap to add the links.
the screen copy tool that comes with acrobat reader to chop the file up into it's parts (buttons, logos, etc).
She uses Quarks to make this pdf. I've never used it, but I hear it is very popular. Are these really my only two options? Someone tell me I'm wrong, please.
Grab what text you can out of the PDF and clean it up. Pull the PDF into Photoshop and slice out the graphical elements you want to use. Rebuild the page using the images and put your text in HTML format.
Make a slice of the gradients and use them as background images with repeat.
Try to explain to your client why the fancy font is unsuitable for this medium.
Edit:
If it's just going to be a screen shot, you might as well just put the PDF up in the first place. At least people can zoom in.
Do not use one big image map. The more content you can convert from image to text, the better (more efficient) your HTML page will be.
Chop up the PDF into parts. Make the logos, etc. images, make text plain text, and make buttons button controls.
Exactly like what Diodeus said except-
-
Find the fancy font and check to see how much it will cost to license or buy it. Build two bills and send them to your client, one with the fancy font and one with a standard font. Then see if she wants the fancy font. It will show that you take your job serious and may get you less strict project conditions.
No they are not:
Adobes Online pdf to html service
or
pdftohtml