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.
Related
I want to easily change my application's font using CSS.
This is what I do to change it:
.root{
-fx-font-family: "Courier New";
}
The font's are changed but all the elements are displaced (I guess it's because of the new font's size).
How can I keep the fonts with the same position and size when changing the font?
Even the textareas are narrower...
I attach two pictures with the difference.
Thanks in advance.
recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
I am using below css to change the font size of every component of primefaces
.ui-widget{
font-family:Arial,sans-serif;font-size: 90% !important;
}
But its look like something not working ,Wizard tab font size is very big,While Button very small. Can some please help me to resolve the issue.
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