currently I´m working on a browser based Document editor.
I want to create different outputPanel. Each outputPanel has a size (height, widht, padding...).
Currently I save all this sizes in px (pixel) (it´s the HTML code).
If I create the PDF with iText I want to create this with the saved sizes. For example:
height: 320px
width: 100px;
Now my question is this possible what I mean?
Or should I recalculate the saved sizes into a other format?
Thank you for your help.
Related
I have several thousand PDFs that I am using Powershell and iText7 to process, exporting the text of the PDFs to Excel. The PDFs are generated from HTML -- they are not coming from a fillable form. Some vital information is captured with "checkboxes" and "radio buttons" that are actually FontAwesome icons (\f14a for the checkbox, \f111 with a font-weight of 900 for the radio button). The icons are added to the HTML with CSS ::before markup. They show up fine in the PDF, but in my output they are unrecognized as characters (in the Powershell console they appear as small empty rectangles, and in Excel, as small rectangles with a question mark inside them).
Here is the CSS for the selected radio button in the original HTML:
input[type=radio]:checked + label.ReplaceWithIcon:before {
font-family: 'Font Awesome 5 Pro';
content: "\f111";
font-weight: 900;
}
Here is the CSS for the checkbox in the original HTML:
input[type=checkbox]:checked + label.ReplaceWithIcon:before {
font-family: 'Font Awesome 5 Pro';
content: "\f14a";
font-weight: 900;
}
Is there any way to detect which icon is being used? I don't need the icon to show up in the output -- I just need to know which one was detected. In addition, for the radio button one, I need to know what the font-weight is. (Selected is indicated by font-weight: 900 in the original HTML.)
Thanks to a comment by #mkl, I got this to work by matching on "\uf111" and "\uf14a".
I have set a background image.Now i have to set size to small but it is not changing its size
<style>
body{
background-image:url("https://system.eu2.netsuite.com/core/media/media.nl?id=3081&c=4667350&h=6b67f18b9fc482ab3827");
background-size:100px 100px;
}
</style>
If you are creating a PDF then there are quite a few css properties that are not implemented. It looks like size is one of these.
One potential workaround though would be to use a background macro instead of an image.
https://bfo.com/products/report/docs/tags/atts/background-macro.html
You should be able to have an img element in the macro and set the size directly.
I have a minimal app with basic views, texts, images and buttons in react native. The problem I am facing, is in managing layout for multiple devices.
Any suggestions on how can I maintain a same (proportionate) view & font size for multiple devices (multiple screen resolutions and screen sizes).
View:
For example, if I want a list view of items, where each row has one image on the left, some text in between and 2 buttons on the right (one below the other i.e. flex-direction: 'column'), how can I have this look good on a 5" device as well as a 10" device?
Also, consider the buttons have some borderRadius, if we are scaling the buttons, the borderRadius value will also need to be increased. How do I achieve this?
Fonts:
I have tried using PixelRatio.getFontScale() but this scales the font depending on only the resolution (from what I understood). Using this, makes a font of size 12 look bigger on a 5" device with higher resolution and smaller on a 10" device with lower resolution. So how can I manage font sizes for the react native app?
In addition to the PixelRatio.getFontScale() you can also use the Dimensions API to get the height and width of the window, and scale your components relative to that. I have built an app that runs on both iOS and android and use this to scale width's + heights.
Checkout the link Dimensions # Facebook - React Native
ie.
Dimensions.get('window').width;
Dimensions.get('window').height;
Will return you the size of the window
How about this library? react-native-scaled-layout
You can use scaled dimensions for your layout margin, height, padding ...
(36).scaled() /* or */ (36).d()
(36).widthScaled() /* or */ (36).w()
(36).heightScaled() /* or */ (36).h()
(24).fontScaled() /* or */ (24).f()
style={{
width: (100).w(),
height: (210).h() + safeAreaBottom,
borderRadius: (16).d(),
justifyContent: 'center',
paddingBottom: safeAreaBottom + (24).h(),
}}
I already have setInterval for the images changing on my website. My problem is that it is only the first image that is replaced with the retina image. How can I load my retina.js again when the other images is loaded? They are changing every 5 sec
I use the script from retinajs.com.
By using CSS media queries you can serve these high–resolution images automatically to retina devices.
/*CSS for basic styling and non-retina image path:*/
.icon{
width: 100px;
height: 100px;
background-image: url(icon.png);
}
/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
#media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.icon{
background-image: url(icon#2x.png);
background-size: 100px 100px;
}
}
UPDATED:
- Cons(retina.js): If you are using retina.js you are serving
normal-sized and #2x images to retina devices, which dramatically
increases the loading time of your site. I cannot recommend using
retina.js if you care about a fast loading time.
- CSS media query (Pros): By adding a CSS media query that detects
high-definition displays you can change the image path of the
original background-image to the #2x image for those displays.
Update:
You might need to modify retina.js to work in slideshows.(See here https://github.com/imulus/retinajs/pull/26)
Modifying these lines
that.el.setAttribute('width', that.el.offsetWidth);
that.el.setAttribute('height', that.el.offsetHeight);
to this..
if(that.el.hasAttribute('width')){
that.el.setAttribute('width', that.el.offsetWidth);}
if(that.el.hasAttribute('height')){
that.el.setAttribute('height', that.el.offsetHeight);}
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}