I have a HTML document like this:
My problem is: When I use rotativa to export this HTML document to PDF, the body doesn't resize automatically to correspond with the PDF's page size. For example, when I choose A5 size and portrait, the content doesn't zoom out, so a part of the body is cut off.
What I want: Export this document to PDF and it should be able to auto resize to correspond with the PDF's page size and orientation. I mean it should zoom in or zoom out to fit 100% width of page size. Moreover, It should looks like how it appears on the browser exactly. Please note that my body must has fixed size because all inside elements have absolute position.
Related
I am facing this problem for a long time. I am generating the flipbook from the canvas using Fabricjs. I am changing the text content color and fonts on the fly. Everything is working fine but when I am trying to use google fonts so in that case text shows blurred and ugly.
Once the image is generated from JSON using canvas and converted the canvas to blob type of images and then I am converting HTML to flipbook.
Sample code Demo
<script async src="//jsfiddle.net/kantsverma/6yanokf1/5/embed/"></script>
Are you stretching the canvas. ie setting a canvas width of 500px then using css to make width 100%. this effectively renders at the lower resolution then stretches the final rendered image.
I'm looking to use PDFJS to embed PDFs into a webpage. I'd like to render them into a fixed-width canvas (and have them scaled appropriately so they fit into the canvas), while having similar resolution/image quality as the original PDF.
If I use a viewport generated like this:
var viewport =
page.getViewport(page.getViewport(canvas.width/page.getViewport(1.0).width);
I get very low-quality image rendering for small-ish canvases. Is there a way to specify both the scale at which a PDF should be rendered and a suggestion for resolution/image quality?
I'm assuming some method of using/resizing a wrapper div may be the solution, but my attempts thus far have not been successful in scaling the contents of the canvas.
(Also, I know this is related to this other post, but that post doesn't mention a way to specify a higher quality pdf rendering for small canvases).
I would like to know how people have reliably (from a system set dynamic text size POV) worked with smaller size fonts on the apple watch, with normal text and timer elements.
The former can have their text size assigned in their attributed text, however the preferred fonts (or descriptors) used to create the new smaller font don't seem to update their size with respect to the watch's dynamic text size setting.
The latter can't have their text size assigned directly though using their minimum text scale and resizing them in the storyboard you can shrink them to a given size ok. The problem from a dynamic text size POV is that these timers DO update their size from the dynamic text size setting but if you've used the storyboard scale and minScale route to resize them then you can run into trouble when larger text size is selected by the user and no longer fits in the smaller size frame so is truncated as ...
Essentially dynamic text size on the watch doesn't even seem to be properly exposed in any of the API so you can't even adapt UI element sizes in code depending on what the current system dynamic text size is set to.
Cheers
I'm looking to embed some youtube videos in my web page and from looking at the videos on youtube they all seem to be displayed with an aspect ration of 16:9 or 640px:340px.
Trouble is I only have 600px max space to put them in, would I just work out the appropriate height i.e. 640/16*9 = 333px and display them in that and would that take care of everything ,or is there any other size allocated for the progress bar at bottom.
E.g. if you look at this video you can see the progress bar throughout.
http://www.youtube.com/user/southerncomfort?v=ygeWsoYYMuQ
Thanks,
You can use any youtube embed code generator to achieve your goal with ease.
Go to Advanced Youtube Embed Code Generator.
Enter the video ID and input either height or width in the
respective column and hit generate button(the empty field will be
automatically calculated with 16:9 ratio)
Copy the code and use it.
You can choose either 16:9 or 4:3, the later being 480px X 385px (+25px to height for controls).
OR, if you want 16:9, you can choose the size to be 560x315.
Check out the style guide: https://web.archive.org/web/20130415231312/http://support.google.com/youtube/bin/answer.py?hl=en&answer=178264
For anyone still on this,
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp.
Ensure to use ALL CSS PROPERTIES AND STYLING enlisted else it won't render correctly on responsive sites and apps.
I am trying to use Rmagick to combine two images.
The image on top can be resized and dragged using Jquery-UI. I get size of the image after resize using Jquery code such as follows:
ui.size["height"] and ui.size["width"]
I send this data using Ajax to Rails server.
The next step I resize the image using Rmagick resize_to_fit and then use flatten_image to combine the two images as follows:
images=ImageList.new(img1, img2)
images[1]=images[1].resize_to_fit!(height, width)
images[1].page=Rectangle.new(height, width, x_coord+offset, y_coord-offset1)
com_img=images.flatten_images
com_img.write(tmpfile.path)
My problem is that the resize image does not seem to work correctly. I am always getting an image smaller than what I want (for different heights and widths tested by resizing image). The image's left top corner is correctly placed (meaning page command is working correctly). I checked my Jquery UI code and ajax and its sending the correct size information. Somehow the information is not being processed correctly by Rmagick resize or flatten_image.
Can someone provide pointers what could be wrong here?
Thanks!
PS: Offsets account for the first image's position with respect to page top-left corner.
I found the solution to the problem Rmagick requires the images when they are resized that they should fit into a square. So the resize_to_fit function works correctly when both dimensions are the same and are the larger one among height or width.
So I changed the code to do the following
if height > width
images[1]=images[1].resize_to_fit!(height, height)
else
images[1]=images[1].resize_to_fit!(width, width)
end