upside down characters

hafsa zaineb

Solved

Question

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

31 Oct 2017

Jorge Martins

MVP

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'):

See solution in context

01 Nov 2017

1 reply

01 Nov 2017

Show thread

Hide thread

hafsa zaineb

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

01 Nov 2017

Jorge Martins

MVP

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

31 Oct 2017

1 reply

31 Oct 2017

Show thread

Hide thread

hafsa zaineb

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

31 Oct 2017

Joey Moree

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?

31 Oct 2017

Jorge Martins

MVP

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'):

01 Nov 2017

1 reply

01 Nov 2017

Show thread

Hide thread

hafsa zaineb

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,

Cheers,

Hafsa

01 Nov 2017

Jorge Martins

MVP

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:

01 Nov 2017

1 reply

01 Nov 2017

Show thread

Hide thread

hafsa zaineb

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

01 Nov 2017

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines