Flip an arrow character - html

Hello I found this arrow that I like ➣ ➣, I am trying to get the opposite direction for this arrow but cannot seem to find one. I noticed that when I found it on this page: http://character-code.com/arrows-html-codes.php there was an additional code listed (➣), but this just makes the same right-arrow when I need a left one.
Does a left arrow for this not exist?

<span>➣</span>
span {
transform: rotate(180deg);
display: inline-block;
}
This doesn't provide an opposite unicode arrow. It rotates the original arrow 180 degrees.
Even better is to flip the arrow horizontally. This CSS should do that.
transform: scale(-1);
filter: flipH;
-ms-filter: flipH;
span.rotate {
transform: rotate(180deg);
display: inline-block;
}
div.flipped {
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
<div>Rotated
<span class="rotate">➣</span>
</div>
<div>Flipped
<div class="flipped">➣</div>
</div>

There is no opposite-direction character corresponding to U+27A3 THREE-D BOTTOM-LIGHTED RIGHTWARDS ARROWHEAD. A sufficient proof is that if you search a Unicode character data base, e.g. using BabelMap, for characters with names containing THREE-D, you find only U+27A3 and U+27A2 THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD. If there were a corresponding leftwards character, it would be practically certain that its name is similar, just with RIGHTWARDS replaced by LEFTWARDS.
#Mouser has suggested nice workarounds, but I thought the question as asked deserves to be answered, too.

Related

How to easily mirror my HTML vertically?

I'm working on the international website now, and one of its' languages is Arabic. Due to Arabic culture, whole interface must be mirrored vertically (obviously to flip sides, not only text direction).
I already tried to use the trick with transform: rotateY(180deg) on container and transform: rotateY(180deg) on each child node, but got an issue that my interface totally disppeared. Tried to transform: scale(-1, 1) with same result. backface-visibility: visible added to each node of document.
Do you have any idea how to mirror website interface without writing separate stylesheets and other painful things?
OK, I just recreated my problem here, maybe this can help: https://jsfiddle.net/z7ksof29/3/
For me this is working:
html {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

Copyleft symbol

Is there any easy way to print the copyleft symbol?
https://en.wikipedia.org/wiki/Copyleft
For example as simple as:
© ©
It might be:
&anticopy; &anticopy;
What about some CSS ?
.copyleft {
display:inline-block;
transform: rotate(180deg);
}
<span class="copyleft">©</span>
It was just added as part of Unicode 11.0.
Code point: U+1F12F 🄯 COPYLEFT SYMBOL
html entity: 🄯 or 🄯
As smnbbrv said in his answer, it is unavailable. However, with some styling you can achieve the desired result:
span {
font: 18px Arial, sans-serif;
display: inline-block;
transform: rotate(180deg);
}
<span>©</span>
You have an html tag in your post, so I assume it's for webbased ends. This might be something you can use.
Simpler,
CSS:
.copyleft {
display: inline-block;
transform: rotate(180deg);
}
.copyleft::after {
content: "\00a9";
}
HTML:
<span class="copyleft"/>
Notes:
It uses CSS's content property to draw the copyleft symbol (CSS code) -- see table of special characters with their symbols
According to the article,
The copyleft symbol is a backwards C in a circle (copyright symbol ©
mirrored). It has no legal significance.[49]
Because it is unavailable on Unicode, it can be approximated with
character U+2184 ↄ LATIN SMALL LETTER REVERSED C or the more widely
available character U+0254 ɔ LATIN SMALL LETTER OPEN O between
parenthesis '(ɔ)' or, if supported by the application, by combining it
with the character U+20DD ↄ⃝ COMBINING ENCLOSING CIRCLE: 'ↄ⃝'.[50] A
discussion on the Unicode mailing list in July 2012, contended that
there are other ways to insert the copyleft symbol, so it need not be
encoded.[51]
You need to read the articles you give till the end.
What you can always do is using CSS with 3d transformations, use for your letter:
transform: rotateY(180deg);
but of course be aware of vendor prefixes / browsers which do not support it
if your are familiar with font awesome you can use:
<i class="fa fa-copyright fa-flip-horizontal"></i>
These answers are good, but I found that the copyleft symbol would be very low relative to other characters of text on a given line, due to the nature of the rotation. To fix this, I added relative positioning so that I could slide my copyleft symbol up in order to be in-line with all of the text.
.copyleft {
position: relative;
top: -5px;
display:inline-block;
transform: rotate(180deg);
}
Tweak top as needed.
This solution is a little more expressive than the other options provided. By doing it this way, we have much cleaner HTML code.
copyleft:before {
content: "©";
}
copyleft {
font-weight:100;
opacity:0.7;
vertical-align:middle;
display:inline-block;
transform: rotate(180deg);
}
The final result in the HTML would be:
<copyleft />
Here is the code I use which just flip horizontally the © symbol.
/* Copyleft
-------------------------------------------------- */
.copyleft {
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
<span class="copyleft">©</span>
As not every font is encoding the Unicode copyleft character, a trick using previous answers:
normal text <style>.copyleft {
display: inline-block;
transform: rotateY(180deg);
}
.copyleft::after {
content: "\00a9";
}
</style>
<span class="copyleft"></span>normal text again
Strangely, on Thunderbird, after <span class="copyleft"/> normal text is mirrored but <span class="copyleft"></span> works smoothly.
Inline CSS is not the best but for Thunderbird it does the trick and you can just insert <span class="copyleft"></span> for following occurrences.

Rotate html special character or text

I have this html character:
<div class="rotate">>></div>
I want this character facing down, for example.
I found this css, it seems not working.
.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
how to rotate?
jsfiddle
Replace webkit-transform: rotate(-90deg); by-webkit-transform: rotate(-90deg); there was typo you missed -.
Fiddle: https://jsfiddle.net/pzawLfgz/3/
If you're trying to rotate a span instead you need to change its display property.
.rotate-span {
display: inline-block;
transform: rotate(18deg);
}
.rotate-div {
transform: rotate(-18deg);
}
<div class="rotate-div">>></div>
<span class="rotate-span">>></span>
.rotate{
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
https://jsfiddle.net/pzawLfgz/2/
and notice this:
It is important that after the special imagined to for old browser
versions CSS commands generally comes last. This then the browser
always delivers the last recognized command and the broadly defined is
better than anything that can even slightly differ in their
implementation. Therefore, please always structured as follows: from
the particular to the general

How to make a text with skewed line but not letters?

I have a skewed text in HTML/CSS.
Like this: (http://jsfiddle.net/UPeYT/)
p {
-webkit-transform: skew(-8deg);
-moz-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
}
I would like the alignment of the text to skew but the words themselves to not be italic. How whould I do that?
I've built something that I needed, but I'm not sure if it is exactly what you need. Essentially I'm taking a paragraph, skewing it, then splitting each word into it's own span with the skew reversed. I'm sure this is horrid for performance on a repaint though.
fiddle
CSS:
span {
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
transform: skew(-18deg);
display: inline-block;
position: relative;
}
p {
-webkit-transform: skew(18deg);
-moz-transform: skew(18deg);
-o-transform: skew(18deg);
transform: skew(18deg);
padding:30px;
}
javascript (uses jquery):
$(document).ready(function(){
var words = $('p').text().split(' ');
$('p').empty();
for (var i=0;i<words.length;i++){
if (words[i]!='') {
$('p').append('<span>'+words[i]+'</span> ');
}
}
});
The HTML is simply a P tag with whatever content.
Something like this?
I append parent to <p> element and apply the opposite!
see: http://jsfiddle.net/joseapl/UPeYT/9/
Just a thought, but I guess it's the only right answer:
This is not possible. Let me show you how I came to that answer. I tried it with font-style: italic, which should not change the text if the skew made it italic for me, but it does not make it italic by default. It's just the transformation of the skew that makes it this way. If you change the degree, you'll see it get's straighter. It rotates the text and than it looks like it's italic, but it is not.
Here is what I mean: http://jsfiddle.net/UPeYT/7/
You can see that it's very different than yours: http://jsfiddle.net/UPeYT/10/
You can wrap the lines in a span or p tag. you want to indent and give them a text-indent to achieve what you want.

How to create perspective text around a circular shape in HTML?

I have to do a web page with some perspective texts on it's menu and contents. Following is a link to an image of the effect I should achieve. Is it possible? Where to start? I'm clueless and don't even know what's the best to do. I appreciate any help.
http://goo.gl/Wlz5b
Rotating text
If you just need to rotate text elements, that can be done with CSS3, using a 2D-transform rotation.
Supporting IE8 and earlier would require using an IE matrix filter (and some extra work to position the text correctly).
JSFiddle Demo
HTML
<div class="content">
<p class="text text1">This is a short sentence.</p>
<p class="text text2">This is a second sentence.</p>
<p class="text text3">This is a third sentence.</p>
</div>
CSS
.text {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.text1 {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.text3 {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
3D rotation
If you need true 3D perspective (such that the text is larger on one end than the other), that will be tougher to manage cross-browser. The mock-up in the question doesn't appear to have 3D perspective.