There is an option in chrome that lets you change default font size (Small, Medium, Large, Very Large) and appearently the
-webkit-text-size-adjust:none;
line isn't supported anymore. Is there any other way I can prevent chrome from changing font size?
Chrome as any other browser has default values for how elements should look.
The best way to get what you want is to implement a css script that resets all the different elements to values you know, and from their set the elements to a new desired value.
h1,h2,h3,h4,p,a {
font-size: 50px;
}
You can also implement media-queries to change behavior as viewport change.
What you want to do, probably, is to operate backwards: instead of preventing the page to change the fonts size, you might want to re-calculate it based on the zoomed level in the user's window.
Have a look at this question, you can try to use the described methods to detect the zoom level in the browser and apply a "counter-zoom" to reset it to your default font-size: How to detect page zoom level in all modern browsers?
E.g.:
If the users zoom at 120% you want to set your font-size to 83.3333%
The formula is simply
function yourFontSize(zoomLevel){
return 100/zoomLevel*100
}
More examples:
If the users zoom at 110% yourFontSize(110) // returns 90.9090909090909
If the users zoom at 120% yourFontSize(120) // returns 83.33333333333334
If the users zoom at 150% yourFontSize(150) // returns 66.66666666666666
And so forth
Try this with jquery, I force the font-size to a specific size. Open your page, right click for Inspect. Minimize-maximize and when the text shrinks, at the top right corner you will see the screen size, force it like this:
$(window).resize(function() {
if ($(window).width() > 400 && $(window).width() < 1000)
$('#myParagraph').css('font-size', '40px');
});
Related
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as ScriptLab:
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
... ...
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column'}}>
<PrimaryButton
style={{ margin: 'auto' }}
text="Open link in new window"
// tslint:disable-next-line: jsx-no-lambda
onClick={() => {
window.open(this.props.url);
}}
/>
</div>
);
Here is my result, where the width of the button is proportionnel to the width of the popup window. As a consequence, the sentence needs to be displayed in 2 rows, which is not what I want.
Does anyone know how to amend the code to get the effect like Script Lab?
Edit 1:
I have made a sandbox: https://codesandbox.io/s/relaxed-feather-i6jz6?file=/src/App.js
Now, the problem is, if we Open In New Window and open https://i6jz6.csb.app/ in a new browser tab several times, we may see a little adjustment of the font of the text in the button. Does anyone know how to avoid that?
On button width:
In order to not have the width of the button grow proportionately with the container you can enforce the width: auto on the button. This way it will only be as wide as it needs to be to contain the text. Value auto is also better than having a fixed width, because it can automatically wrap the text if the popup becomes too narrow to display the text in one line (with fixed width your button would overflow instead - which looks really bad).
On font adjustments
For the font adjustments you experience - this is a very common thing on web and it even has its own name - FOUT (Flash of Unstyled Text). It happens when you use custom fonts on the page, because these are files like any other and so they take some time to download. Browsers prefer displaying the content as early as possible (even without custom fonts loaded) to displaying the perfect content (by waiting on all resources) with some speed penalty.
The only way (at least that I know) to completely avoid FOUT is to use system fonts instead of custom fonts (github does that for example).
If that's not an option, you can minimize the FOUT by caching the fonts on client machines for long times. This way they will experience the flash briefly on the first visit, but not on subsequent ones.
You can also try to minimize the FOUT by telling the browser to try to preload the font files that will be needed for the page (part of the reason why FOUT happens is that browser discovers the fonts very late) https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Set a fixed width to the button.Setting a fixed width will make it unproportional to the width of the pop-up window.
width:280px;
Second Option: If you use min-width, the button width will decrease to a point.
Third Option: If you use max-width, the button width will increase upto a point.
Fourth Option: You can also use '#media' queries to customize the width according to size of the screen.
You don't want the button's text to wrap, so you'll need to change the font size, which you can do when you find that the button's height increases when the text wraps. I suggest that you create a invisible, but not 'display: none', possibly 'off-screen' version of the button so that the real button's font is changed after you know the right size is needed. Alternatively, what about an image or glyph instead of text, and a Title for the button text?
I am using Weebly to create an online store, using a template and ran into something I dislike. Every time an user clicks on a product the product page comes up and if you hover over the product's image, a zoom function is initialized. How do I disable this effect?
I have a feeling that it is something simple like display:none; but I can't seem to figure out which class or whatever is associated with it.
The simple way is to hide the element that is placed over the image on hover via CSS:
.cloud-zoom-big,
#cloud-zoom-big {
display: none !important;
}
or
.mousetrap {
display: none !important;
}
The better way would be to disable the JavaScript, that is calculating the effect. It's located in your http://cdn2.editmysite.com/js/site/commerce-core.js at the beginning of the file. But this file is minimized, so its hard to remove the relevant code.
It's not necessary to make any custom code changes.
The zoom is going to be based on the size of the image that you upload. So, say for example your image is 300 pixels by 300 pixels there will be no zoom. Zoom starts at about 640 pixels. So, just make sure your image is smaller than 640 pixels.
Note:
If your image is 3000 pixels by 3000 pixels the zoom is going to be great! And an image that is somewhere in the middle of that is going to have about half the amount of zoom.
I'm using a php styleswitcher and alternate stylesheets to try to duplicate the function of browser zoom (keyboard cmd-plus or ctrl-plus).
Right now, the "zoom in" graphic is linked to an alternate stylesheet with the following css:
body {
zoom: 1.2; -moz-transform: scale(1.2); -moz-transform-origin: 0 0}
}
This works fine, but ideally I'd like to have the link trigger a relative zoom rather than an absolute zoom value -- so i would need to establish a variable that determined the user's current zoom level, and then increase that zoom by 120%. This way the same link could be clicked multiple times to increase the zoom incrementally.
Any idea how to do this?
I think this will need JavaScript.
If I remember it correctly, you can change/create CSS-styles with JS. So if you save a variable in JS and multiply it with 1.2 everytime the onClick of the link is triggered, it should create the same effect.
EDIT: I don't know if it's possible, but if you can multiply variables in LESS, you could that 'language'. As it's a combination of CSS & JS
I need to make a control that has three T's of varying size that are linked. By clicking on each T the article text will resize to either a small, medium, or large font appropriately.
Does anyone know how I can do this? Also, do you know of a site that uses this kind of text resize feature?
Thanks in advance.
UPDATE: Thanks for all of your responses. I went digging through Google a little further and found that this has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It's using JS to dynamically resize the font and this is exactly what I want to do. I'd much rather do this in CSS if possible still though - anyone?
You can do this with CSS - if all of your fonts are percentages, then you can set one font size for the document and all children will be a percentage of that.
The approach will not be able to be implemented using CSS only. You will need to use CSS in conjunction with JavaScript.
The best approach would be to set your page's default body size using either percentages or ems. You would create two extra classes for the larger and smaller font size for the page's container or <body> tag. These classes could use larger and smaller percentages / ems or you could use the keywords: xx-small, x-small, small, larger, x-large, xx-large. (NOTE: I left out smaller and larger since they seem not to work sometimes).
Then using JavaScript you could attach an onclick event to your three T's which would dynamically add the desired class to the page container (or <body> tag). If they clicked on the middle T then the applied large/small class would be removed returning the page to it's default font-size.
A few things to keep in mind:
A user can set a minimum font size for their browser so if you set your "small" size below that that setting, that user will never see your smallest font setting.
You will need to experiment with how your layout acts if a user has a larger default font-size setting.
Hope this helps and good luck!
You could attach different CSS files depending on which 't' the person has clicked (changing the paragraph text size). I'm sure there's a better way, but that'll get the job done!
Using jQuery you could do something like this:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
To clarify, this actually does use CSS to change the sizes. You would have three CSS classes named 'small', 'medium', and 'large':
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
The setTextToSmall() function is called when the user clicks on the small "T". It adds the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:
<div class="text-to-resize">Some sample text</div>
You would have this after the click:
<div class="text-to-resize small">Some sample text</div>
If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.
You can use
("fontSize",+=3px)
If you don't want to have limit.
How do I increase the native FORM submit button size for OSX-Safari?
I want to keep the native look of a FORM submit button for it's respective operating system while also enlarging the size of the submit button. (Meaning, no use of images, custom borders etc..)
Using the following CSS:
input.submitbutton {font-size:150%;}
On Windows, this increase the submit button size height and width as desired ... regardless of the browser (Safari, Firefox, IE, Chrome).
But on OSX - Safari does not increase the button size at all. The form button size remains the default size.
Try to include this CSS property on your style:
-webkit-appearance: button;
Hope this helps!
Safari's form buttons are notoriously hard to style (if not impossible).
As others have said, height is pretty much untouchable.
What you can do is set the font size to an exact pixel size to resize the button.
input.submitbutton {font-size:14px;}
That should make the font size larger and the button as well. It does max out though...you can't just keep increasing the font size.
The "native look" of a pushbutton includes a fixed height by definition
Push Button Specifications
Control sizes:
Push buttons are
available in regular, small, and mini
sizes. The height of a push button is
fixed for each size, but you specify
the width, depending on the length of
the label text you supply. If you
don’t specify a wide enough button,
the end caps clip the text.
What you want would not be "native" and therefore will necessarily involve the creation of a custom image, or you can always do something like this
http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
If you apply a border to the button, Safari abandons it's glossy button and you can do what you like with it.
I am using several input type="button" and they style ok using:
input[type="button"] {
-webkit-appearance: button;
height:40px;
}
They did not style without the -wbkit- line.
or use the <button> tag.
Particletree! Rediscovering the Button Element
It’s an edge case, but if you’re trying all sorts of things and just can’t get Safari to make button labels smaller, you might have activated the “Never use font sizes smaller than X” option in Safari’s preferences:
This snagged me yesterday. Just turn it off and Safari will be much more likely to respect your CSS directives.
input.submitbutton{
width:200px;
height:500px;
}
Seems obvious, but have you tried changing the element size instead of the font size?