The default font for <pre> tags in Bootstrap 5 is a monospaced font, as it should be. However, I want to use a pre tag for a poem to preserve the line breaks, and I want the pre tag to use the default Bootstrap 5 sans-serif font, not the monospaced one. How do I do this without copy/pasting whatever Bootstrap does with its CSS?
I see that Bootstrap 5 has a class for using a monospaced font family:
<p class="font-monospace">This is in monospace</p>
What I need is the opposite, something like font-default.
You can add class names to your pre element to override the font stack. In the snippet below, I added .poem class with a non-monospace font to pre tag. See how it compares to text-monospace class.
body {
padding: 20px;
}
.poem {
font-family: cursive;
padding: 1.5rem;
background: #f0f0f0;
}
.poem.inherit {
font-family: inherit;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<p class="text-monospace">This is in monospace</p>
<pre class="poem inherit">
What
is
a Fib?
A poem
mathematical
Syllables are arranged in lines
according to Fibonacci's sequence of numbers:
One, one, two, three, five, eight, thirteen, twenty-one, thirty-four, fifty-five and so on.
</pre>
<pre class="poem">
What
is
a Fib?
A poem
mathematical
Syllables are arranged in lines
according to Fibonacci's sequence of numbers:
One, one, two, three, five, eight, thirteen, twenty-one, thirty-four, fifty-five and so on.
</pre>
Related
I am Using a Regional language unicode font-face in my site but the numbers are not looking good.
So I want to apply new font-style or css to numbers only..
please help
This can be done using CSS's unicode-range property which exists within #font-face.
The numbers 0 to 9 exist in Unicode within the range U+0030 to U+0039. So what you'll need to do is include a font alongside your existing font which specifically targets this range:
#font-face {
font-family: 'My Pre-Existing Font';
...
}
#font-face {
font-family: 'My New Font Which Handles Numbers Correctly';
...
unicode-range: U+30-39;
}
The result of this will be that every instance of Unicode characters U+0030 (0) through to U+0039 (9) will be displayed in the font which specifically targets that range, and every other character will be in your current font.
You can wrap all numbers in p tags with a <span class="number">:
CSS
.number {
font-family: Verdana;
}
jQuery
$('p').html(function(i, v){
return v.replace(/(\d)/g, '<span class="number">$1</span>');
});
But personally, I would go with James suggestion ;)
http://jsfiddle.net/ZzBN9/
There is no way to apply CSS to all numbers specifically. In each number tag you could add the attribute class='number' and then in the CSS you could add
.number {
font-family: arial;
}
Better with this
$('p').html(function(i, v){
return v.replace(/(\d+)/g, '<span class="number">$1</span>');
});
With + you avoid one span per complete number (span for 321), not one per each number found (span for 3 for 2 and for 1)
You can use the regex replace and detect the numbers then add the class
following code:
$('p').html(function(i,c) {
return c.replace(/\d+/g, function(v){
return "<span class='numbers'>" + v + "</span>";
});
});
.numbers
{
color:red;
font-size:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
View 11 new out of 11 message(s) in your inbox
</p>
The Bootstrap stylesheet has:
pre code {
color: inherit;
}
If my page now has an explicit pre code { color: red; }, the Bootstrap stylesheet style still takes precedence. Why? [Edit: can ignore this question as it was due to the wrong order of definition.]
How do I make color for pre code to take the color that is computed for code, without hardcoding the color value?
Bootstrap has set the color for code to #383e3c based on the selected theme. I don't know the reason why it has set a different color for pre code. I would like my pre code to have the same color as code.
Please load your style after bootstrap and also use parent class or element to override bootstrap CSS.
you can use your parent class in place of body.
body pre code { color: red; }
Append !important to your properties to get higher priority.
pre code {
color: #383e3c !important;
}
Or you can give an id to code element and resetting the override that pre causes by re-writting the attributes:
pre code#id {
color: #e83e8c;
}
And use the style sheets like this:
<link href="/bootstrap.css" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
I am trying to have two different Font Sizes in the same Table th cell
My code is as below but does not appear to work i.e. the (Frm) stays at font 14
Please help
echo "<th width='70%' style='background-color:#FFD8D8;font-size:14px' colspan=\"14\"><left>".$startlocation."<style='font-size:8px'>"."(Frm)"."</left></th>";
There is no such element called <left>. What I would recommend you do, is add classes to your elements instead of using inline styling through style=.
th {
width: 70%;
background-color: #FFD8D8;
}
.left {
font-size: 8px;
}
.right {
font-size: 14px;
}
Then you can add a <span> tag around your text, which can look something like this as your final code:
echo "<th colspan=\"14\"><span class=\"left\">".$startlocation."</span><span class=\"right\">(Frm)"."</span></th>";
I'm not sure what your other text is inside the <th> element, but doing what I did will solve it. It's also best practise to use classes and IDs instead of inline styling, as it's easier to change in the future.
EDIT: If you absolutely need to to inline styling, this will work:
echo "<th colspan=\"14\"><span style=\"font-size:14px\">".$startlocation."</span><span style=\"font-size:8px\">(Frm)"."</span></th>";
Insert <span> like this:
...$startlocation."<span style='font-size:8px'>"."(Frm)"."</span></left></th>"
so that you can specify style of some element the way you tried.
I'm a graphic designer in a magazine and we'd like our website to be closer to our printed issues.
In the magazine, we use small caps for strings of more than 2 capital letters in a row.
I know it is possible to use true small caps with an OpenType font. I also know that you kan target 1st lines or 1st letters with CSS
So my question is:
Would it be possible to target/detect strings of capitals letter within a text, and apply automatically the font-variant property to it (without having to manually apply styles or classes).
here's an example
If you mean like this, sure! The regular expression could be improved though, as it only matches words, not sequences of words, but regex is still alienspeak to me, so this is the best I can do:
[].forEach.call(document.querySelectorAll(".smallcapsify"), function(content) {
var parsed = content.innerHTML.replace(/[A-Z]{2,}/g, '<span class="small-caps">$&</span>');
content.innerHTML = parsed;
});
#import url(http://fonts.googleapis.com/css?family=Merriweather);
span.small-caps {
font-variant: small-caps;
text-transform: lowercase;
}
/* Styles to make it look nicer */
body {
font-size: 2em;
font-family: Merriweather, serif;
text-rendering: optimizeLegibility;
/* Enable common and discretionary ligatures, according to http://blog.fontdeck.com/post/15777165734/opentype-1 and http://caniuse.com/#search=font-feature-settings */
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";
}
<div class="smallcapsify">
This is SOME TEXT. Here is some MORE text.
</div>
I've been using em-calc for CSS size definitions in my Zurb Foundation projects so far. However, recently I've noticed developers using rem-calc more and more.
I know what each function does, but I don't really understand when I should use em-calc or rem-calc.
What is the difference between these two functions?
Well in fact your question is some kind of duplicate of How does rem differ from em in CSS? (and Practical difference between rem and em units) and so on
em-calc() returns the em value of your input in pixels, whilst
rem-calc() returns rem units. In practice that means that when you use rem-calc() to set the font-size of a selector the font size is relative to the font size of the html attribute instead of its direct parent.
You can see the diffence in the following example:
html
<body>
<section> section text
<small>small text</small>
</section>
<section class="rem"> section .rem text
<small>small text</small>
</section>
</body>
sccs
section {
font-size: em-calc(24);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(24);
small { font-size: rem-calc(12); }
}
The result of the above will look like that shown in the image below:
Now change the font size of the section tags:
section {
font-size: em-calc(48);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(48);
small { font-size: rem-calc(12); }
}
Notice that because of both section tags are direct parents of the body using rem-calc(48) or rem-calc(48) for the font-size of the section in the above wont make any difference for this example.
Now the result will look like as follows:
As you can see, the font size for the small does not scale with its parent.
Personally i think you should use rem-calc() for the main structure elements of your page (header, footer, content, navigation etc.) and em-calc() for the element nested in the preceding main elements.
So for the example use here:
section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}