I have a web page that uses bootstrap 3 css and when a user print the page, it always seem to take the small or x-small layout, making controls really bigs and on different lines. I am ok with the page layout being that way on xs layout because it does make sens on a small screen, but it doesn't on paper.
I am not really good in css in general, but I was wondering if there is any way to force the printing so that the printed version look like the "md" version or even bigger ?
EDIT : Just to make sure I explain correctly, here is the page on a big screen
And here the printed version :
Is there anyway way to make the printed version bigger in term of width ? If this is possible, the controls will indeed be smaller but better stacked, which is what I am aiming at.
If you want to do this with css only:
#media print
{
/*whatver css you need here*/
}
The #media rule allows you to specify a different style for different media.
But another approach it to add a print button to the site that uses javascript to open the print dialogue. Then based on that click event you can make changes to the page/ show a printer friendly version.
additional css approach:
add a css stylesheet specifically for printing
<link rel="stylesheet" media="print" href="print.css">
Copy your regular stylesheet into print.css and change all the fonts to print friendly ones. This is better than option 1 because it sounds like you want to override a lot of settings and !important is bad practice.
Related
Google Material Icons has different variations in Icon font Families: Rounded, Sharp, TwoTone, etc.
The UX team is taking some icons, and customizing them bit, little thicker or minor touch up.
Is it possible to replace/edit the icons, and keep the same content code without any issues? Example:
We are using Visual Studio .Net Core application, and placed Material Icons in our library.
Additionally, is it possible to Create New Content Code? Say, I create Company logo. Can I assign it a Content Code?
Referring to Material icons with both content code and class name
.carouselrightarrow {
font-family: Material Icons;
font-size: 36px;
position: absolute;
top: 16px;
content: "\e409";
}
<button id="add-to-favorites"
class="mdc-icon-button">
<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
<i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>
Right now, currently replacing the rounded icon base. Another reason to conduct this besides saving coding time/existing code base; if client ever want to swap to Google Material: Filled, Sharp, Two Tone, Outlined, it can be done in easy manner.
References:
How to set the CSS content property with a Google Material Icon?
Material Design Icons - Codepoints
Possible Solution Links
How to Use Material Icons
Custom SVG Icons Angular Material
Your best bet is to override the CSS.
(This is not hard. The C in CSS is, "cascading," which means the thing that comes afterwards gets used instead of the thing that came before. This is overriding.)
Create a CSS file:
.material-icons.mdc-icon-button__icon--companylogo {
font-family: "Font From UX Team";
/* whatever other styling you need, like sizes */
content: \0000;
}
.material-icons.mdc-icon-button__icon--on {
font-family: "Font From UX Team";
/* whatever other styling you need, like sizes */
content: \0000;
}
Make sure the font file from your UX team is included somewhere before this. Also make sure that this file it loaded after the other CSS, the one that Material Icons is using right now. Replace the content directives with the character code (ask the UX team) that matches the icon you want.
This should replace all the Material Icons content that you've selected with the ones you want instead.
If you find that what they're replacing is turning out to be too much to manage custom CSS for, generate it automatically or use a CSS preprocessor like SASS.
Updated
It seems that you're mixing SVG and font items, using the font from Google and SVG from your team. This complicates things. SVG is essentially HTML, while the definitions for entities (icons) you're using are purely CSS. The problem arises because CSS expects the HTML to already be there.
You can do a few things:
Use all SVG. This means not using the font file from Material Icons and including their SVG instead. Given that you're probably working within some framework that made the original decision for you, this may be very difficult. Either way, it'll be costly from the perspective of HTML listing size, therefore page load time.
Assemble the SVG from your team into a font file. This requires the most work on the back end but yields the most elegant solution. Your UX team may know how to do this or they may be willing to learn, thus saving you the trouble. There may also be a completely automated way to do this in your build process (VS, right?) that may save you the trouble.
Include the SVG just for the items you're replacing and adding. You have the option to either include them on every page (HTML or CSS bloat) or somehow figure out where they're needed and include them selectively (code complexity).
I would highly recommend the middle option (#2). Maybe start by asking your UX team nicely if they're able to use the editing software they already have to output a font file (ODT, TTF, etc.) instead of SVG listings, which may already be an available function. Clicking in a different place may give you the result you need, then you just add some CSS.
I need to enter a text to existing pdf (in top or bottom of the page) in c#.
I need to make sure that I dont overwrite any visible text or image.
Is there any way I could check an area in pdf if it contains text, image, control etc? I understand it will not be 100% accurate
You're going to need a full PDF consumer at the very least, because the only way to find out where the marks are on the page is to parse (and possibly render) the PDF.
There are complications which you haven't covered (possibly they have not occurred to you); what do you consider to be the area of the PDF file ? The MediaBox ? CropBox, TrimBox, ArtBox, BleedBox ? What if the PDF file contains, for example, a rectangular fill with white which covers the page ? What about a /Separation space called /White ? is that white (it generally gets rendered that way on the output) or not ? And yes, this is a widely used ink in the T-shirt printing industry amongst others.
To me the simplest solution would seem to be to use a tool which will give you the BoundingBox of marks on the page. I know the Ghostscript bbox device can do this, I imagine there are other tools which can do so. But note (for Ghostscript at least); if there are any marks in white (whatever the colour space), these are considered as marking the page and will be counted into the bbox.
The same tool ought to be able to give the size of the various Boxes in the PDF file (you'd need the pdf_info.ps program for Ghostscript to get this, currently). You can then quickly calculate which areas are unmarked.
But 'unmarked' isn't the same things as 'white'. If you want to not count areas which are painted in 'white' then the problem becomes greater. You really need to render the content and then look at each image sample in the output to see if its white or not, recording the maxima and minima of the x and y co-ordinates to determine the 'non-white' area of the page.
This is because there are complications like transfer functions, transparency blending, colour management, and image masking, any or all of which might cause an area which is marked with a non-white colour to be rendered white (a transparency SMask for example) or an area marked with white to be rendered non-white (eg a transfer function).
Your question is unclear because you haven't defined whether any of these issues are important to you, and how you want to treat them.
For my Asp.Mvc 5 project, I have a horizontal menu, like; Home, Products, about, etc.
For that menu, I have used some CSS styling to make it collapse into a dropdown menu, if the page size is getting reduced, or the resolution is low:
#media screen and (max-width: 767px) {
.headerNavigation{
....
...
}
}
This works fine on my laptop and PC ; if the width of the browser gets below 767px, it will make it to a drobdown instead. This was so it would not start putting the last <li> below the first<li>.
The thing is, it doesnt work on tablets, as the resolution is usually high there. But the last <li> will still be moved below the first one, as the screen size is smaller.
So my question is: Is there a way to check, if your Mvc5 webpage is running on a tablet? Or is there a better way to handle something like this ?
Maybe you should consider responsiveness?
It is better than simple #media statements if you expect the page to be displayed on many devices like PC/tablet/smartphones.
Take a look here: https://www.google.com/search?q=css+responsive+tutorial
You should not try to "detect" a tablet. Your web should be fluid as a river that borns tiny in the mountain and gets huge when gets to the sea: you get water all along.
Smartphones are getting bigger and maybe in a near future a smartphone will enter in you "tablet" mediaquery.
Your website should look fine in all.
Anyway, if you want to detect your device, you can do that server side with PHP script like PHP Mobile Detect
I'm not a programmer, but my developers here in the office tells me that you can archive the same in .NET.
Tablets prefer to scale webpages, give it a try with portrait:
#media only screen and (orientation:portrait) {
.headerNavigation{
...
}
}
Assuming the menu should show as normal when on landscape.
Basically, what I'm trying to do is get an image to represent a page (for quick browsing in a XAML GridView).
I have the pages URL (and it's HTML content), but now I'm not completely sure how to proceed. I could just use the Favicon, but I don't think that would scale well up to the 200x200 box I'm using to display it. The other option (as far as I can think of) is to look through the HTML source and pick out the largest image.
Is there an easier/simpler way to do that in C# other than just using Regexs to find the height/width of all the image tags and then comparing them?
Thanks!
There is no way to know for sure from the HTML source what size the images are. An img tag doesn't require the height and width parameters. If they're not specified, then the image is displayed in its actual size. If all the img tags on the page have their height and width specified, you could pick the one that has the largest values. But those are the display sizes. The actual sizes might be quite different.
The only way to be 100% sure is to download each image and get its size.
By the way, if you're parsing HTML, you probably shouldn't be doing it with regular expressions. I know it seems simple enough, but you're almost certain to get things wrong and not handle some common cases. You'll save yourself a lot of time and frustration by using something like the Html Agility Pack.
you can try
imageObject.ActualWidth
imageObject.ActualHeight
properties
What is the easiest/best way to set the maximum width of a web page. For example assume I don't want to let the user to expand the width beyond 400px. HTML code, CSS, C#?
I am using Visual Studio 2008 C# environment.
Thanks
Bruce
If you want to limit the browser width, well you can't do that :P
Alternatively, if you want to limit a certain element's width, such as a div with an ID of #container, then you would use CSS:
#container {
max-width:400px;
}
Wrap the content of the page is some sort of container (a <div>) is usually suitable. Apply the max-width property to it.
Simply make a fixed width CSS layout set at 400px.
Trying to prevent the browser window to be greater than 400px is horrible idea, and will fail in more ways than it will work (mobile, etc).