Jump to content

Overline with arrows


Recommended Posts

We have a lot of stuff discussing geometry, so have a need to do the line and ray symbols, which would be an overline with left and right arrows for line, and overline ending in a right arrow for ray. I absolutely have been unable to find a solution for implementing these using CSS/HTML. These are fairly common symbols, so I'm sure there's a way to do it

 

Suggestions?

Link to post
Share on other sites

Most sites that deal with math generate images with LaTeX or some similar software and put those on the page. There is an XML-based language called MathML which can render any mathematical symbols but it is only supported by Firefox (https://developer.mozilla.org/en-US/docs/Web/MathML), other browsers haven't caught up yet.

Link to post
Share on other sites
On 7/11/2019 at 10:49 PM, owlerz said:

We have a lot of stuff discussing geometry, so have a need to do the line and ray symbols, which would be an overline with left and right arrows for line, and overline ending in a right arrow for ray. I absolutely have been unable to find a solution for implementing these using CSS/HTML. These are fairly common symbols, so I'm sure there's a way to do it

 

Suggestions?

I am unclear of what you are trying to do. 
Can you give an example or link to the display you wish to create? 
What is an "overline" in relation to a left/right arrow?  Is it like a superscript or subscript display?

 

Link to post
Share on other sites
6 minutes ago, JMRKER said:

I am unclear of what you are trying to do. 
Can you give an example or link to the display you wish to create? 
What is an "overline" in relation to a left/right arrow?  Is it like a superscript or subscript display?

 

In math it is normal to add "diacritics" of sorts to variables to indicate what type of information it contains, some examples can be found in this page: https://en.wikipedia.org/wiki/List_of_mathematical_symbols#Letter-based_symbols

Link to post
Share on other sites

So in geometry, a line segment is written like "AB" with a line above - easy, just use the overline in a span. A ray from A to B would be a right arrow --> above AB. For a line (not a line segment), it's arrows in both directions <-->, again, above the AB.  I know it can be done in Latex, and images generated from that, but that method is messy and annoy. This site has done it with images: https://www.varsitytutors.com/hotmath/hotmath_help/topics/lines-segments-rays. I just think there's probably a way to do without resorting to images. This is standard math notation, but I can't find a solution anywhere. (I've been through all the extended symbols, and am happy there's a code for an interrobang....)

So basically, I need a way to stick > or < on the end of an overline. Does that make sense?

Link to post
Share on other sites

That's one way to do it. It'll take even more work to get the arrow to cross over two or more variables. Possible, sure, but not easy.

It's not a feature built into the language was what I was getting at.

It certainly would be nice if more browsers supported MathML.

Link to post
Share on other sites

From the link at: https://www.w3schools.com/code/tryit.asp?filename=G645EZ9AAZ7U

Modify for two character arrow bar

	<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
	h1 {
  color: white;
  text-align: center;
}
	p {
  font-family: verdana;
  font-size: 20px;
}
#A-arrowleft, #A-arrowright {
padding-top: 9px;
display: inline-block;
position: relative;
	}
	#A-arrowleft:before, #A-arrowright:before {
position:absolute;
top:0;
left: 0; right: 0;
height:9px;
font-size:9px;
vertical-align: top;
line-height: 9px;
text-align: center;
}
	#A-arrowleft:before {
content: "\2190";
font-size: 1.2em;
}
#A-arrowright:before {
content: "\2192";
font-size: 1.2em;
}
	</style>
</head>
<body>
	<h1>My First CSS Example</h1>
<p>This is a paragraph. <span id="A-arrowleft">AB</span></p>
<p>This is a paragraph. <span id="A-arrowright">BA</span></p>
</body>
</html>
	

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...