I'm new to html, and use hebrew a lot. I came across this problem, which makes me think I'm misunderstanding something.
As for as I know, the element has no effect, but it does allow adding style.
However, trying to do this:
<span dir="rtl"> some text that should be rtl'ed </span>
Doesn't seem to work for me (the dir has no effect).
Using a <div dir="rtl">, on the other hand, works fine.
So.. why isn't the <span> working? As far as my understanding goes, I'm using <span> for exactly its purpose: adding styling. It works fine when I use it to add color... why not for this?
Thanks for any insights!
Edan
P.S. After some testing, I also discovered that if I surround the text with <p> (inside the <span>), then the dir does take effect. But in that case, why wouldn't I just use <p dir="rtl">... the whole idea is that I don't want any elements, just to style something.
dir has an effect on a span, but a span will not be aligned to the right as you expect, only its content.
You will see the effect for span if you end it with a dot - the dot will be placed on the left side, and not on the right.
Div is a display:block element, meaning it fills the whole width - that's why text can be aligned in it. Span is display:inline, so it's sitting in the text, similar to a letter (in a simplistic way).
(by the way - it's considered invalid to have a block element inside an inline element)
Here's a working demo. Notice the last div is far on the right:
Test right to left, div and span: <br />
<span>(span) Hello World!</span> <br />
<span dir='rtl'>(span rtl) Hello World!</span>
<div>(div) Hello World!</div>
<div dir='rtl'>(div rtl) Hello World!</div>
The difference is that span is an inline element, and dir doesn't apply to inline elements (the same way height and position don't). The reason it works with div and so on is that those are block elements. So you'll want to use a block element for setting your text direction.
Related
I have tried using inline styles such as
#whiteRectangle{
top:5%
}
to try and move it manually but this is not working.
My code pen listed above shows what I have tried so far and what the problem looks like. Any guidance in getting the text and white rectangle moved for the fifth box would be greatly appreciated.
Second but smaller issue: Each text inside each box is not the same as the text shown in the design above. That is, for example we have
I have tried removing
text-align:center
but the issue still persists so any pointers on this second issue would be greatly appreciated too.
If you want to align the white line (whiteRectangle), wrap the text in a div. You can also get rid of the br tag for "Apps" and play around with the CSS top section I provided.
<div class="lineup">
Facebook <br/>
Competition <br/>
Apps <br/>
<div class="whiteRectangle">
</div>
Then add the following to your CSS
.lineup{
position: relative;
top:-20px;
}
I don't know if you'll accept this as a solution, but if you want the three 'white rectangles' to be in line, you could add another br tag on top of the content of the the two boxes beside it.
<br />
Facebook <br/>
Outreach <br/>
and
<br />
Facebook <br/>
Networking <br/>
Another solution would wrap the whole content of the boxes, set its position to be absolute, then set a fixed value for bottom.
I love the way slack did their highlight of keywords and values in their search I wanted to do something similar.
For those who don't know how it looks a screenshot :
when you inspect slack dom and css, it's something like this
<div style="position: relative;">
<input id="search-query">
<div class="highlighter_underlay">
regurlar text that doesn't match keyword:value goes here
<span class="modifier">key:</span>
<span class="keyword">value</span>
or here
<span class="ghost_text">hint</span>
</div>
</div>
So i'm positioning div over input using absolute positioning, setting .highlighter_underlay text to equal contents of value, tokenize input, adding nice styling to .modifier and .keyword - all easy and works and looks great.
But there is one thing i don't know how to deal with.
Notice that input has a fixed width, but you can enter more text into input and it will overflow and be hidden.
Question is how do you move your overlay div in sync with text input text as it has to align? Please notice that div overlay had to be moved.
It seems it's some css positioning trick, as i don't see any css properties changing when i type more text into input so i don't think it's javascript, neither i could find anything specific in their css that would do that ...
Any ideas?
Here's a link to a prototype:
http://codepen.io/anon/pen/dYZzeB
One method to move an element relative to its parent is to use the CSS combination of:
Parent element using: position: relative
Child element using: position: absolute
CODEPEN Example: This simple example illustrates the relative relationship.
In the live Slack code you referenced, the actual styling box is coming from the pseudo element ::before. When this is set absolute to its relative-set parent, it will follow the relativity of that parent -- thus enabling it to track left and right relative to the parent.
In HTML, how do I prevent this "linebreak" when using the <div> tag?
Example:
<div class="menu"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
Visual example:
How do I make it so that apple appears directly to the right of menu? I can't seem to do that successfully; apple always appears to be below menu
NOTE: Pretend that 'apple' is inside its own invincible maroon box.
When using <span> instead of <div>, you need to get rid of the line breaks (<br>).
If using inline CSS (which is the style attribute), you may want to add style = "float:left;" to the first div only. This way:
<div class="menu" style="float:left;"><br><br>menu</div>
<div class="apple"><br><br>apple</div>
It sounds like you have two block elements that you would like to display side by side?
Have you tried using the "display: inline-block;" property in your css yet?
You can change your CSS to include the following;
div.menu, div.apple {
float:left;
display:inline-block;
}
You might also need to set the width of each to less than 50%.
<div class="menu"><br><br>menu<span class="youtube"><br><br>youtube</div>
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
I want to use <p> instead of <br><br> since it takes less space and I can change how big of a gap it will create (changing the top margin of p).
However when using a floating image using <p> will make the row appear below the image instead of beside it.
I was think about setting the display property to inline but that makes the <p> not changing row at all.
So, how can i make p behave like br?
You don't 'make <p> behave like <br>', you use the right element for the job. If you're wrapping paragraphs of text, you use a <p> tag.
Outside of HTML emails, I don't ever see a use for a <br><br>.
p { height:(designated height of space); }
note that this only works if the line is very short and not breaking; or you will end up with a mess.
Its not really good practice to change the br tag...I mean that's why standards exist. like #hunter said before.