Title is pretty much self-explanatory... I have this html div element, and it doesn't look the way I want it to, and that happens when I resize the screen:
<div class='serveMessage'><strong>Fun fact:</strong> over 1,259,468 american students fail every year!</div>
I tried removing the &_nbsp; but it still doesn't work :(
This is want I want it to look, but with bold text:
https://imgur.com/a/2u0GS
This is what it looks like instead with the strong tag:
https://imgur.com/a/OGF9S
The css involved!
.content .serveMessage {
margin: 0 8px;
font-family: 'Raleway', sans-serif;
font-size: 14px;
color: #63827b;
display: flex;
align-items: center;
justify-content: center;
padding: 11px 0;
text-align: center; }
Thank you for your assistance!
A text run is a valid flex item, so by failing to place the strong tag and the following text run in a common parent, you have two flex items in your flex container:
a <strong> element
a text run
A text run is basically a text node that the browser has to interpret as a unit, but that doesn't have it's own semantic or container element.
You should be able to solve this by doing one of the following:
changing the display of .serveMessage to something other than flex (say, block), or
adding a containing element within .serveMessage so that the text run isn't flexed along with <strong>
The first seems preferable, but the second makes sense if you have some compelling reason to flex this class elsewhere, and this is an isolated workaround.
Related
Display Flex bug
I'm trying to make this icon just in front of the text but there must be flex and aligin-contet: center; otherwise the text would be such a scatter you will see in the photo where there is a red line so I have already used display:flex; and aligin-content: center; I need to do it somehow so that the icon is still and the show somehow I can't do it I've been doing it for 2 days and they've never helped me yet.
#autocomplete a {
font-weight: bold;
text-decoration: none;
color: #111;
padding: 0.2rem 0.5rem;
border-radius: 20px;
align-items: center;
display: flex;
}
#autocomplete .fa.fa-search {
padding: 5px;
float: left;
}
without Flex and content-aligin: center;
with Flex and content-aligin: center;
you can try using "flex-direction: row-reverse;" it should reverse your items inside the container with the display flex applied.
have a nice day and good luck 😁
My approach would be like this:
Add the following CSS definition:
#autocomplete a * {
vertical-align: middle;
}
The "bold" text is outside a span or similar element. You should also put it into a <span>, so the correct style will be applied to it.
Example:
<a href="./search?q=abcdef&source=autocomplete" data-index="1">
<span class="nobold">abc</span>
<span>def</span>
<i class="fa fa-search"></i>
</a>
(The span around def is the new one.)
Explanation:
The * in the CSS definition in 1. will make the style apply to the selected element and all its children. So, in 2. you just add a matching "child" by using the span. I've tested it and it works for me.
Hint: I don't know if you know about this technique, but you can always use the browser's development tools in order to try such things "on the fly" within the page being shown.
Okay i am working on this and the Ori Guy add me some Idea and i make this code
justify-content: flex-end;
flex-direction: row-reverse;
And look is working :D
Really Thank all who help ME!! THANK YOU <3
I have a site powered by Wordpress, and on one of my posts I have the following text.
Any readers interested in the different ways to interpret utils are encouraged to read about the difference between Ordinal and Cardinal Utility.
If Wordpress can't put all of the text "Ordinal and Cardinal Utility" on the same line as "between" it puts it all on a completely new line, which can look really clunky, especially on mobile. Because it's a hyperlink it's prioritising keeping it as one item whereas I'm happy for the words to be split over multiple lines, just as it would if it wasn't a hyperlink. I know this is a basic problem but for some reason I haven't found any solutions online. Is there an easy way to fix this?
The CSS property you're looking for is either white-space: nowrap or display: inline-block, depending on the look/style/effect that you're going for. By default, the <a> anchor element is an inline display, which allows the text to wrap.
Here are a few examples:
div {
width: 200px;
background: #e4e6e9;
padding: 10px;
margin: 10px;
}
a {
background: #0094ee;
color: #fff;
text-decoration: none;
}
.ib {
display: inline-block;
}
.ws-nw {
white-space: nowrap;
}
<div id="a">
Usually, links are "inline" which means they wrap around once they hit the side of the container.
</div>
<div id="b">
You can have them set to inline-block to prevent broken wrapping, but the text still wraps. inside the block
</div>
<div id="c">
You can avoid any wrapping at all by setting it to white-space: nowrap;. Be careful on super long text though because it can cause unexpected results on small containers.
</div>
See this picture. My attempt is on the right.
What is causing mine to have a gap above my text (which also causes its position to be lowered)?
Here is the source example at FreeCodeCamp:
https://codepen.io/freeCodeCamp/full/zNBOYG
Here is my attempt:
https://codepen.io/headonshoe/pen/jObERrg
I think your missing the line-height variable. By default you usually want the font-size to be the same as the line-height. Unless you are doing it intentionally.
.projects-title {
font-size: 2rem;
line-height: 2rem;
text-align: center;
padding: 2rem 0.5rem;
}
With CSS there is always multiple solutions. It looked like the freecodecamp was doing something a little extra with <span><</span><span>/></span>.
I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have
index.html:
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
styles.css:
body {
background: #f0f0f0;
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: 35px;
margin-bottom: 60px;
}
p {
font-size: 20px;
font-family: sans-serif;
}
.cl {
margin: 38px;
padding: 25px;
background: #f8f8f8;
font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size: 12px;
}
.fake-url {
color: blue;
}
Most recently I had tried using .fake-url in the div,
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
and after that I did
p, p div {
font-size: 20px;
font-family: sans-serif;
}
I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.
And as someone mentioned above, you have an extra ; inside the div's class
<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.
Instead, use a <span> or, more appropriately, a <a> element.
MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
Just removing the ; from the class name in the div will fix it.
I'd like to use HTML <ruby> to mark up Japanese text with its pronunciation. However, I've found that at large font sizes, the baseline of the <rt> text is well above the top of the characters it's marking up. Here's an example which shows what I mean:
ruby {
font-size: 72pt;
}
<ruby>遅<rt>おそ</rt>い</ruby>
For reference, this is how it appears in my current browser (Firefox on Linux), though I've seen similar behavior in other browsers:
What I would like is to adjust the height of the ruby text to be something more like this:
However, nothing I try seems to have any effect on the positioning of the ruby text. These are all things that I have tried which did not work:
vertical-align: -10px
postion: relative and top: 10px
transform: translateY(-10px)
Is there any way that I can adjust the positioning of this text?
I think I've found a solution which allows for styling <ruby> elements while preserving their semantics. Here's a demonstration, and then a few key insights:
body {
font-size: 72pt;
}
ruby {
display: inline-flex;
flex-direction: column-reverse;
}
rb, rt {
display: inline;
line-height: 1;
}
<ruby><rb>遅</rb><rt>おそ</rt></ruby>い
Set the <rt> element to be display: inline.
Chrome seems to have some special behavior when <rt> is display: block, which prevents styling it as a normal block-level element. That special behavior appears to be disabled when using display: inline.
Use a separate <ruby> element for each annotation.
While there are several valid ways to mark up ruby text, using a new <ruby> element for each annotation gives us a nice container element and makes styling much easier. This is semantically equivalent to using a single ruby element with multiple <rt> and <rb> elements.
Use flexbox to position ruby text.
Flexbox is by far the simplest and most powerful way to position ruby text. If your browser doesn't yet support flexbox, you can try using inline-table, but I didn't have much success in styling content using it. Users of older browsers might also want to see Paul Fioravanti's answer.
I used display: inline-flex to treat the ruby elements as if they were normal text while still having flex contents, and then flex-direction: column reverse to position the text vertically with the <rt> on top.
Set line-height: 1 in the <ruby> element.
A lot of the extra space between the text and its ruby markup can be attributed to the fact that the line height is not the same as the text height by default. Setting line-height: 1 will ensure they are the same.
If the spacing between elements is still not the desired spacing, setting margin-bottom on the <rt> element can adjust it. It can be set to a positive or negative value.
In order to attempt to provide an answer to this question, I went to https://japanese.stackexchange.com/ to see how actual experts in this would do it. There, they seem to have dispensed with the <rb> and <rt> tags and instead changed them to <span>s and styled them appropriately.
Based on the styles I found there, I came up with this CSS jiggery-pokery that seems to get at least in the ballpark of what is needed to take some control of the sizing and positioning of furigana text.
ruby {
font-size: 72pt;
display: inline-block;
line-height: 1em;
position: relative;
}
span.rb {
display: inline-block;
padding-top: 0.6em;
}
span.rt {
font-size: 0.55em;
position: absolute;
display: block;
line-height: 1.3em;
top: 0;
}
<ruby>
<span class="rb">遅</span>い
<span class="rt">おそ</span>
</ruby>
For me, simply using <rt>'s margin-bottom works on Firefox:
<html>
<head>
<style>
div {
float: left;
border: solid;
margin: 1em;
}
ruby {
font-size: 5em;
background-color: rgba(255, 0, 0, 0.3);
}
rt {
font-size: 1em;
background-color: rgba(0, 255, 0, 0.3);
}
</style>
</head>
<body>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: 0em;">kazuooku</rt>
</ruby>
</div>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: -0.4em;">kazuooku</rt>
</ruby>
</div>
<div>
<ruby>
<rb>数多く</rb>
<rt style="margin-bottom: -0.4em; margin-top: -0.2em">kazuooku</rt>
</ruby>
</div>
</body>
</html>
This solution makes sure that if <rt> is wider than <rb>, the characters in <rb> will be separated (notice the space between "数" and "多" below).
Firefox:
However it doew not work so well on Chrome (I am using Chromium, though):
Some fonts have this problem and others don't. We can try to trick the browser into thinking the ascent and descent are different by first loading a font "emptied" with unicode-range, and then falling back to the font we actually want. Some trial and error may be needed in figuring out what fonts have the best or most compatible metrics, and if they are too short letters like g might collide.
#font-face {
font-family: "Empty";
font-weight: 400;
font-style: normal;
unicode-range: U+000A;
src: local("Webdings"), local("Times New Roman"), local("Arial");
}
ruby {
font-size: 72pt;
font-family: "Empty", "My Font Here", sans-serif;
}
<ruby>遅<rt>おそ</rt>い</ruby>
<ruby>語<rt>go</rt></ruby>