Vuetify 3 offers several classes to style font in different weights of bold and italic. But there does not seem to be a class that is equivalent to the CSS directive "font-style: normal;"
See the docs here: https://next.vuetifyjs.com/en/styles/text-and-typography/
Am I missing something?
Why do you need this, you might ask. Let me explain: I try write semantic HTML and thus I'm using em to highlight important words or phrases. But em is styled as italic on most browsers by default. I want to style it bold and colored instead, but not italic. So I need to overwrite this default style.
Is there any way to do this with Vuetify classes or is plain CSS the way to go here?
Related
I am using the Bootswatch Lux theme on my Django based site, but bold text just appears as little different from normal text.
Is it possible/wise to change the css is some way to produce a greater differentiation between normal and bold text?
If you use font-weight: bold, there are not many things to change because that's the default bold of the font you use. So there are 2 options, one option is to change the font and the other is to declare a new class (say bold) and give a darker color to create a more clear difference. But if you are talking about headings and buttons you can go to _variables.scss and change the font-weight to what you need.
I'm using Wordpress.
Is it possible to set a font-family for RTL text and headers (I'm not using WPML or Polylang, just text aligned to right and written in Arabic), different from the one my theme uses as default? ie. keep the default font of my template for English language, but use a different font for text and headers (h1, h2…) aligned to right (or written in RTL language like Arabic and Hebrew).
How do I do that using my themes's style.css or a custom css?
Thanks.
This is tricky, and it really depends on what exactly you want to achieve and how you do it. You can, however, take advantage of the fact that RTL blocks (and inline text) uses the dir="rtl" property to set a general CSS rule that captures the elements that have those properties.
For example:
<h1 dir="rtl">עברית</h1>
And then add a CSS rule like this:
*[dir="rtl"] {
font-family: serif;
}
This isn't perfect and you might have to have some adjustments, but it could at least do the trick. You need to make sure all of your RTL text is defined with dir="rtl" -- which is a good practice regardless, and what W3C recommendations are.
You can check this jsfiddle as an example (I added colors to the rule to show how it affects the relevant RTL pieces).
What is the difference between the terms 'text' and 'font' as used in CSS property names? Do they mean the same thing, or is there a semantic difference between a CSS property name starting with font- and one starting with text-?
For example, why do we have these CSS properties:
font-size: 34px;
text-decoration: underline;
instead of them being named like this?
font-size: 34px;
font-decoration: underline;
or like this?
text-size: 34px;
text-decoration: underline;
Is there a semantic difference in the way font- and text- are being used here, or is the choice of prefix completely arbitrary?
As far as my understanding goes about this:
Text: The way the layout and presentation is computed.
Font: A character to glyph mapping. The 1-to-1 'mapping' doesn't entirely hold up when you consider ligatures and other advanced font features, but in general it is a good mental model. The font determines the shape of the characters.
You can underline text drawn with a certain font, but you cannot underline the font itself. You can, though, resize the shapes such that text drawn with that font has larger glyphs. (hence, font-size)
That's also why you have font-style: italic and not text-style: italic, since the actual shapes change when you typeset in italic. The same goes with font-weight vs text-weight.
Hope this helps.
If you look at the properties starting with text- and those starting with font- you can see a clear difference:
text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
These are all used for layout, positioning or visual presentation of the text.
font
font-family
font-size
font-style
font-variant
font-weight
#font-face
font-size-adjust
font-stretch
And these are all used to transform the shapes of the characters, the glyphs.
The parts of a CSS property name have no meaning, and the property name as a whole has only the meaning assigned to it in CSS specifications (or drafts). Usually the names, when interpreted as English words, are suggestive of the meaning, but the name does not define the meaning, and some names are outright misleading. (For example, white-space affects division into lines even in contexts where no whitespace characters are involved.)
So the names are just identifiers, but there might be some systematics in the assignment of names. As it happens, property names that start with font- relate to the choice of typeface used to render characters or a specific way of using a typeface. Property names that start with text- relate to other aspects of formatting text (characters).
This division is relatively clear, but it depends on the techniques: some features of formatting are font-related, due to the way font technologies work, some are not.
The division is reflected in CSS3 “module” division: font-related features are defined in CSS Fonts Module Level 3 (which defines properties with names beginning with font), whereas other text-formatting features are mostly defined in CSS Text Module Level 3 (which defines some properties with names beginning with text-, but also other properties).
Looking over the font- properties listed on MDN's CSS Reference, it seems to me that properties starting with font- affect, or at least have the potential to affect, the choice of which font from within the font-family to use to draw a particular character. Properties starting with text- never do this, but do all kinds of other stuff, including post-rendering to add text effects like shadows that are independent of glyph choice.
For instance...
font-family - provides a list of font families from which to choose a font with which to render each character; obviously, this affects glyph selection.
font-weight - where possible, shows the text at the correct level of boldness by selecting an appropriately bold font from within the font-family.
font-size - may apparently affect the actual font chosen, because not all font formats are arbitrarily scalable. This is corroborated by the following quote from the font-family docs (emphasis mine):
When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.
(Although I'd guess this is mostly a historical issue, since I don't think non-scalable font formats are still in use today.)
font-size-adjust - much like the above.
font-stretch - to quote the docs:
This property does not change the geometry of an arbitrary font by stretching or shrinking it. Like font-feature-settings or font-variant, it is merely a mean to choose the most appropriate face of the font, if this one offers several of them.
... and so on. Not all these properties always affect font selection; for instance, font-size is obviously about glyph rendering, not font selection, in the case of scalable fonts, and the font-weight and font-style properties may result in the browser synthesising bold or italic glyphs rather than using a bold or italic font, as noted by W3:
Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.
The thing that the font- properties have in common, though, is that they are the properties that can potentially affect font and glyph selection. So the choice of when to use the font- or text- prefix seems not to have been made arbitrarily.
I already tried the custom function from the website, but keeps give me error, and tried the BASIC method too:
body {background-color:red;}
so, does anyone know?
Download all of the bootstrap files and somewhere inside the .css file add:
body {
background:red !important;
}
The correct way to change background color in Bootstrap 3 is to use bg-* classes. For red color there is bg-danger. Also available bg-primary, bg-success, bg-info and bg-warning.
http://getbootstrap.com/css/#helper-classes-backgrounds
I would not recommend changing the actual bootstrap CSS files. You can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
SOURCE: How to change the default background color white to something else in twitter boostrap
I would strongly recommend using Sass with Bootstrap-Sass not just for making any customisations to the core Bootstrap framework but also to ensure your CSS is as DRY as possible. Then you can do something like
$red: #f00;
$body-bg: $red;
before you import your core Bootstrap CSS, and you will be good to go. Note that Sass allows you to reuse the variable ($red) you just declared anywhere else you may like in your app.
The benefits of using a CSS preprocessor like Sass or LESS don't end here. Bootstrap is based on a proportionate system of font sizes, so you can also do something like
$font-size-base: 16px;
and that will accordingly change the font sizes of all elements (p, h1..h6 etc) across the board. You may also, for example, write
$font-family-sans-serif: 'Gill Sans';
and that will replace Helvetica as the default sans-serif font for all elements.
Look here for all the customisations you can make to your code whenever you wish and not just while downloading Bootstrap if you use Sass.
In html change to
In CSS change "body {}" to ".body {}"
This is because a CLASS is more specific than a tag, and so it will take the rule over the main bootsrap.css which only classifies as a tag.
I have a boilerplate I've created that I use to create bootstrap themes, that will generate docs using the theme you've created. I've implemented this at companies that use it across multiple web teams in order to get a branded result while just using basic bootstrap components.
Check it out here: https://github.com/patrickleet/bootstrap-override-boilerplate
There are instructions in the README
For Bootstrap 3.3 Add the following BG Style.
body{
background-color: gray !important;
}
Source : from Bootstrap 3.3 Guide.
In XHTML Strict, it seems that you're not allowed to use the <u> tag any more. Is there a semantic equivalent like there is for <b> and <i>? If not, is there any convention for how to markup underlined text in XHTML?
Thanks.
In short - no.
<b> and <i> don't really have equivalents, either. It's all about the separation of content and appearance. The goal of XHTML strict is that the XHTML markup should be used to describe the structure of the content.
<em> tags are used to convey emphasis and <strong> tags are used to give strength to the content. It just so happens that the default style sheet in most browsers equates these to italic and bold respectively.
Having a direct equivalent for bold, italic and underline in XHTML would allow people to dictate the appearance of the content too closely. Ideally, you should think about why you want a piece of text to stand out, define that in the structure and then leave the CSS boys to decide how it should ultimately be rendered.
To have an equivalent, you have to define why you are underlining things in the first place. If it's just your preferred way of emphasizing text, then use <em> and change its style in CSS to be underlined instead of italic.
Your question is flawed - "underline" has no semantic meaning, no more than bold or italics do (strong and em have default styles, but they aren't hard wired to bold or italic in the way you think they are).
The correct approach here is to mark up with a <span class="highlight"> (or some other suitable keyword - I don't know your app) or just mark-up with and override the css for <em> if this is going to be a common enough occurrence.
Also: there is always a problem with using underline in any kind of emphasis manner since there is a built up convention that links are underlined. I would generally consider non-linked underlines a usability issue, even if actual links are not underlined. Think carefully that you really need this.
<em style="text-decoration: underline">
No. And there is no "semantic equivalent" to <b> or <i> either. It just so happens that <em> and <strong> (I assume those are what you had in mind) are implemented, by default, using bold and italics in most browsers.
Typographic stuff like underlining should be implemented using CSS, of course. Make a class and use a <span>.
As far as I know not. But it is a bit questionable to see strong as an equivalent of b.
The purpose of the new tags is to decouple the format (bold) from the meaning (more visible text). The default apearance is bold, but you could create any style you like.
nope, you have to use css with text-decoration: underline