Generate Right Big Arrow 🡲 with CSS for Local Webview

Skip to CodePen

We can insert most of unicode symbols to a website just by copy paste it to our code. Another way is to embed a certain syntax following with UTF code of that symbol. For example to insert this ♠ we can embed ♠ in HTML or '\u2660' in javascript.

Unfortunately, when I tried to embed this arrow 🡲 to my Android WebView, it didn't work. But many other symbols worked well.

Recently, I knew this happened because of the font of that symbol is outside of Android scope. I found several suggestions on forum discussion to solve it, such as adding a necessary font to your App or using third-party CSS-icon. The first one wastes memory cause it consumed at least 1MB to add font to App in exchange for adding one symbol. The second option is more reasonable, we can implement it by adding resource-link from CDN to our HTML (for using it online) or by importing it as node module (for using it offline).

But, I found a better solution,

1. Using CSS Border-hacks

/* create this: ∟ */
.next {
  position: relative;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid black;
  border-left: 2px solid black;
}

/* add Diagonal line: ∟ + ⟋ = ⟀ */
.next:after {
  content: "";
  position: absolute;
  bottom: -2px;          /* minus border-width */
  left: -1px;            /* minus half-border-width */
  border-bottom: 2px solid black;
  width: 28px;           /* about 1.4x .next-width */   
  transform: rotate(-45deg);
  transform-origin: 0 0;
}

For better aligning purpose use only even number border-width. See comment in code above.

Next, add transform property to .next class to rotate arrow 135deg clockwise,

.next {
  ...
  transform: rotate(-135deg);
}
...

2. A Simpler Solution

Here's a more simple solution by adding math-symbol called Three Dimensional Angel “⟀” (U+27C0), reference about this symbol Click Here.

Then, simply rotate it so it headed rightward.

Here's some contras of two solutions above:

1. CSS Border-Hacks
   • You must add more padding to parent element such as button, because the parent only considers the initial size (before transformation) which is smaller.
   • Compared to second solution, the CSS configuration is indeed longer and more complex.
2. 3Dimensional-Angle Based
   • The symbol is too small, cause the actual initial size (before transformation) is just as tall as lowercase character.
   • The parent element only considers the line-height of initial size (not an actual size) so it will expand the parent size more than it should be. Suggestion: Make parent size smaller and add negative margin to wrapper element for alignment.

Conclusion

• The second solution is more simple and with some practices it will become handy.
• The first solution is good for practices, and you will gain basic for creating other symbols or shapes from just borders. Check this reference

Thanks for coming.