upside down characters

upside down characters

  

Hi everyone,

                         My header contains an upside down V (?). But while testing on my mobile using outsystems Now it only shows a blank space instead on an upside down V. Do I need to make special changes for it to show in my applicatoin or what?

Cheers,

Hafsa

Hi Hafsa,

how are you defining that upside-down V? if it is a character/symbol from some font, it is possible that your mobile device doesn't know that font or how to show that character/symbol...

you could also use CSS to rotate an HTML element, like your "V" text, that should work across the board. Just apply the following class to your text (or a container around it):

.rotate {
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* standard */
  transform: rotate(180deg);
}

Hope this helps

Jorge Martins wrote:

Hi Hafsa,

how are you defining that upside-down V? if it is a character/symbol from some font, it is possible that your mobile device doesn't know that font or how to show that character/symbol...

you could also use CSS to rotate an HTML element, like your "V" text, that should work across the board. Just apply the following class to your text (or a container around it):

.rotate {
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* standard */
  transform: rotate(180deg);
}

Hope this helps


Hi Jorge,

Here is a print screen.

The problem is as per demand I have to write an 'A ' like this character. It shows this way when I test it on my machine but when I test it using my mobile I get it without that character. It only shows an empty space.

Maybe I need to put an image to display that or is their anyother way out?

Cheers

Hafsa

It's probably a special character not found in the charset used on mobile.

I think the best option is to create an image (maybe svg?).

Or you could try to think of a way to load the a different charset on mobile?

Solution

Hi Hafsa,

Please consider this revised CSS class:

.rotate {
  display: inline-block;
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* standard */
  transform: rotate(180deg);
}

You can see the outcome here, on an iPhone. It shows using the CSS class above, and using the math symbol ? (Unicode code is U+2227, HTML code is #8743 and HTML entity name is 'and'):

Solution

Jorge Martins wrote:

Hi Hafsa,

Please consider this revised CSS class:

.rotate {
  display: inline-block;
  /* Safari */
  -webkit-transform: rotate(180deg);
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* IE */
  -ms-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* standard */
  transform: rotate(180deg);
}

You can see the outcome here, on an iPhone. It shows using the CSS class above, and using the math symbol ? (Unicode code is U+2227, HTML code is #8743 and HTML entity name is 'and'):



Hi Jorge,


Thank you for the explanation. The code is working fine only I don't know how to use it for one specific character. Its making the whole 'HASHOO FOUNDATION' upside down. Also, how can I apply it for the math symbol '?' 


Cheers,

Hafsa


Hi Hafsa,

It's simple, just separate the Text widget into several:

  • Select the portion of text you want to separate; right-click on it, select Split from the context menu

  • and you end up with something like this:

  • Then it's just a matter of applying the CSS class to the part that you're interested in, like this: 


Jorge Martins wrote:

Hi Hafsa,

It's simple, just separate the Text widget into several:

  • Select the portion of text you want to separate; right-click on it, select Split from the context menu

  • and you end up with something like this:

  • Then it's just a matter of applying the CSS class to the part that you're interested in, like this: 



Thank you Jorge for a good explanation. It solved the problem :)

Cheers,

Hafsa