Does anyone see a way to make the TinyMCE 4 Font Sizes drop down offer font sizes in px instead of pt?
Thanks
You need to use the fontsize_formats option where you can also change the unit of the values of the font sizes dropdown:
tinymce.init({
selector: 'textarea',
toolbar: 'fontsizeselect',
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px"
});
Demo JSFiddle.
Related
In an attempt to convert a ttml file into a webvtt file, I've been trying to set a font size in cues, but without css styling. For instance, instead of:
WEBVTT
STYLE
::cue {
font-size: 80%
}
I would like to have the font size attribute to appear in the cues:
00:00:00.000 --> 00:00:4.000 font-size: 80%
This is sized at 80%
I've tried using size: 80%, but apparently that's unrelated to font size.
Is there any way this could be accomplished?
Thanks in advance
The settings that can be specified on the cue are specified at:
https://www.w3.org/TR/webvtt1/#cue-settings
and those that can be specified on text within the cure are at:
https://www.w3.org/TR/webvtt1/#caption-text
Font size is not one of them.
Going through the Bulma.io documentation, I cannot find how to set the base font-size for the responsive design.
As per this section on setting initial variables, we can set the initial value of classes $size-1 etc. However, I am wanting to set the very base font-size for the responsive-design. I.e. when the screen dimensions are, say, 980px, the base font-size should be 12px, instead of the standard 16px. Because the above mentioned font classes '$size-1', are rem, they would automatically resize as well.
So, my question is, is it possible to set the base font-size for the responsive design in Bulma? Or must I change the sizes of the classes $size-1 etc manually.
Thanks
Add this after importing Bulma SASS files.
html {
font-size: 12px;
#include tablet {
font-size: 16px;
}
#include desktop {
font-size: 20px;
}
}
This overrides the $body-size variable, but it's only used to set html {font-size} so this should not cause any problems.
It's the $body-size variable that you were looking for. Before importing Bulma, customize the variable's value:
// Custom config
$body-size: 14px !default;
// Standard Bulma
#import "bulma/bulma.sass";
I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:
html { font-size: 14px }
And the bootstrap 4 rem values will update the text accordingly.
Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?
For example:
html { font-size: 16px }
// Changing bootstrap variable to
$font-size-base: 0.875rem //instead of 1rem
With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.
It is now crystal that we will need to change $font-size-base which will directly change the root font-size.
I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.
REF: https://github.com/twbs/bootstrap/pull/24060
Caution about using just CSS override
using the supplied css example will not work for all aspects of bootstrap sizing.
The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.
List of sized elements
dropdown font
button font
popover font
input-group font
forms font
reboot font
-------------- Example SCSS --------------
This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
#import "variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// #import "datatables";
#import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap defines base font-size in it's _reboot.scss as
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
NOTE:- Never change default values into frameworks files always modify values using custom css/js files.
so in order to change your font-size to 14px use this in your own style.css(custom css file)
body {
font-size: 0.875rem;
}
Here is the working fiddle
use !important you are not able to see your changes to override your change on default.
In your custom.scss file do like this:
$custom-variable:0.875rem;
Then use it like this:
#import "./src/scss/_modules/custom";
#import "./bower_components/bootstrap/scss/bootstrap";
body {
font-size:$custom-variable;
}
I'd suggest you to update directly the html {font-size: 16px} property instead of changing Bootstrap's $font-size-base, for several reasons:
html's font size will be directly used in calculating final font size. There's no benefit to use an "intermediary", that is, body that is being adjusted by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculate heading size etc using $font-size-base, so all Bootstrap affected CSS rule will be affected, which includes body (set into $font-size-base$).
However, browser calculate any CSS font size rule in rem relative to html {font-size}, not from $font-size-base affected elements (like body).
Setting html {font-size} using px will affect any rem value, both inside and outside Bootstrap affected elements, if this is what you want to achieve.
Conversely, if you only want to set sizes for Bootstrap-affected-elements, do set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap will not be affected. But I'd say this is more of an edge case, instead of the norm.
Note:
If you're setting $font-size-base or any other Bootstrap variables, you don't have to modify variables.scss file. You should define variables before importing node_modules/bootstrap/scss/variables and other Bootstrap files, so your values got used instead of !default values set in Bootstrap. The advantages: no need to edit the whole variables.scss file.
Bootstrap's global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?
Will I have to change bootstrap.min.css in all the multiple entries?
Bootstrap uses the variable:
$font-size-base: 1rem; // Assumes the browser default, typically 16px
I don't recommend mucking with this, but you can. Best practice is to override the browser default base font size with:
html {
font-size: 14px;
}
Bootstrap will then take that value and use it via rems to set values for all kinds of things.
There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:
http://getbootstrap.com/customize/
Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.
Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.
As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.
If you are using SASS or LESS, you would change the font size in the variables file before compiling.
You can add a style.css, import this file after the bootstrap.css to override this code.
For example:
/* bootstrap.css */
* {
font-size: 14px;
line-height: 1.428;
}
/* style.css */
* {
font-size: 16px;
line-height: 2;
}
Don't change bootstrap.css directly for better maintenance of code.
The recommended way to do this from the current v4 docs is:
$font-size-base: 0.8rem;
$line-height-base: 1;
Be sure to define the variables above the bootstrap css include and they will override the bootstrap.
No need for anything else and this is the cleanest way
It's described quite clearly in the docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings
As of Bootstrap 5 you can set the default font size by changing the $font-size-root variable.
$font-size-root: 16px;
In v4 change the SASS variable:
$font-size-base: 1rem !default;
I use Bootstrap via CDN (Content Delivery Network), so I solved it with this easy way. Change the global default font-size in the <html> tag.
Example for smaller font-size:
<html style="font-size:0.875em">
Simple change the em value.
With Bootstrap Version 5.2 the font size is 1rem:
font-size-base: 1rem; // Assumes the browser default, typically 16px
0.875em = 14px, if default browser font size is 16px
1em = 16 px
1.125em = 18px, if default browser font size is 16px
I just solved this type of problem. I was trying to increase font-size to h4 size. I do not want to use h4 tag.
I added my css after bootstrap.css it didn't work.
The easiest way is this:
On the HTML doc, type
<p class="h4">
You do not need to add anything to your css sheet. It works fine
Question is suppose I want a size between h4 and h5?
Answer why? Is this the only way to please your viewers?
I will prefer this method to tampering with standard docs like bootstrap.
I have an application made in struts 1.2 and it will be accessed by Desktop browser as well as Android browser. The layout of the DEsktop browser is fine but having problems with the layout in Android browser. Somehow I managed to do the UI look and feel changes but stuck with the button font.
Below is the code I wrote for the button:
<html:submit property="action" value="Login" style="width: 150px;height: 80px;"></html:submit>
The button appearence is fine but the font of the button i.e. Login is very small. I tried adding the font: 100px; in the style attribute but it did not worked.
Any suggestions on how to increase the font size of the submit button text?
Please let me know about this.
Regards,
The font property value must be either a single keyword indicating a system font or contain at least font size and font family, as in font: 100% Calibri. If you wish to set the font size only, do not use the font shorthand but the specific property font-size, e.g. font-size: 30px.
font css attribute isn't what you want.. Use font-size: 100px instead.
In fact with font you can specify multiple font related attributes. Documentation