I'm using the following CSS to read a text from right to left:
.rtl { unicode-bidi:bidi-override;direction:rtl;width:300px;}
<span class="rtl">.tfel οt thgir mοrf daer si txet sihT</span>
It's part of an experimental site that would display all the text in the source code reversed, but readable to users.
It works well if I only have a sentence of text. However, once the length of the text is longer than the size of the element (300px in this case), the order of the sentences no longer works. For instance:
Source:
<div class="rtl"> .skaerb txet eht ,htgnel niatrec a tsaP .yllamron demrof era shpargarap eht rehtehw ees ot secnetnes lareves dedulcni ev'I dna ,tfel ot thgir morf daer si txet sihT</div>
Output:
(since I can't post images, there it is: http://img4.hostingpics.net/pics/990715343.jpg )
As you can see, the first sentence, "This text is read from right to left" is aligned at the bottom, which means the order of the paragraph is wrong.
Is there another way to have to text flow normally from top to bottom and read from right to left?
Thank you
It seems (as I explain in a comment) that you actually want text lines to be laid out bottom to top. There is currently no standard or cross-browser way to achieve that. On IE (version 8 and newer) you can use writing-mode: rl-bt (right to left, bottom to top). You might also wish to set text-align: left, since right-to-left direction implies by default right alignment, which is OK for right-to-left languages, but not so for tricks on writing direction for left-to-right languages.
Related
I have a table cell containing a paragraph of text. At the end of the paragraph I have a word count. Like this:
From The Analects of Confucious: The Master wanted to settle among the nine barbarian tribes of the East. Someone said: "It is wild in those parts, how would you cope?" The Master said: "How could it be wild, once a gentleman has settled there?" (44)
Depending on the zoom and page width and user's screen size, the last line will probably have some white space after it. I want the count to be positioned over to the right, after the white space.
I could list a few things I've tried, but why? since none of them worked at all.
Did you try using float:right on the word count element?
Been using Slider Revolution on WordPress recently for a new client and having one big issue that I cannot find an answer to.
SITUATION
- I have 2 text elements, a Title text element and a Description text element (one above the other - vertically stacked)
- They have been manually placed to be aligned-left inside the slider area.
- I have them with a fixed width so they only cover the left side of the slider panel
- I have them set for auto-wrap so words do not get cut off and the test will drop to another line if needed.
PROBLEM
With this configuration, if the Title text element is too long (too many words) it will dynamically expand vertically (drop down lines) and cover up or overlap the description text element box below it.
SOLUTION
I would like to find a way to "link" or "hook" these 2 elements together (stacked one on top of the other with little space) so they do not overlap and the top element will automatically push down the 2nd text element box. Is it an html issue? a z-index issue? a placement process issue?
In the image I provided, you can see the difference between a 1, 2 & 3 line TITLE, and how the space between them is fixed. HOW DO I GET IT TO BE DYNAMIC? I apologize if this has been answered before, but I have searched for hours and cannot find an answer. Maybe I am searching with the wrong keywords.
slider-revolution-examples
This is a common situation with Revolution Slider when we use different text elements since they will be different layers and used with position:absolute.
The best solution for this is to merge all the text elements inside one element using basic HTML and style them as needed inside this element. Like this we only have one element used with position:absolute and inside it we have well formed HTML.
I use CSS speech bubble (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/)
in order to implement a chat.
This is an example of screen I ended up with:
The blue bubble is a message from me and the red is from a counterpart.
The piece of code I wrote is:
<p class="inset list" ng-repeat="message in messages | orderBy:'id'"
ng:class="{ true:'triangle-right right', false:'triangle-right left'}
[message.sender == {{ user }} ]">
{[{ message.body}]}
</p>
while {[{ }]} is a symbol of angular parameter.
I would like that the width of the bubble will be fit to the length of the text inside.
Please pay attention that the message inside one bubble may include several rows so the width needs to fit to the longest row.
In addition, the blue bubbles need to be alignment to the right.
I tried to insert function for ng-style as function of message.body but I didn't succeed to make the width changed as I wanted...
It would be very kind if one of you can write me detailed and implicit instructions...
This works for me:
http://jsfiddle.net/K67NN/1/
this is my test html:
<p class="triangle-right left">test1</p>
<p class="triangle-right right">test2</p>
I used the stock css that you linked to, and I just added these to the classes left and right
.left{float:left; clear:both}
.right {float:right; clear:both}
This works because floated elements have implicit width by default and they are aligned to the left or right of their enclosing element. The clear:both just keeps them from piling up on one line.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>
Is it possible to calculate if an element is at the start of a new line within a <p>? For example take a look at this screenshot:
You'll see that the Twitter button has a slight margin to it. This is fine when it's following a word, but I was wondering if there was a hidden CSS gem that'd allow me to say "if you're the first 'thing' on a line then lose your margin-left".
Edit: The answer was p button:first-child or p > button, but neither work. See the comments.
You might want to set the margin to 0 all the time and then make sure the button always has a space before it. (Edit: won't work either, since a space is not enough. Again, see the comments.)
It is possible to do this calculation programmatically using JavaScript, but I'm not aware of any CSS tricks that will do it for you.
The basic JavaScript algorithm for doing this is to append an invisible node to your document with the same text styling as your paragraphs of text. Then you gradually add text to it, checking its width after each addition to see where the linebreaks are. Then when you've worked out what the width of the final line is, you check to see if that width would put the twitter button on the next line by itself, and update the CSS styles appropriately to remove the margin. This needs to be done for each <p> on the page that includes a twitter button.
It's not the most straightforward approach (in fact, Mr. Lister's solution is far simpler and produces a comparable effect as long as the margin is not more than a few pixels wide), but it's not quite as bad as it sounds, either.
Here's an example:
http://jsfiddle.net/fBUnW/6/