Noratrieb/womangling
1
0
Fork 0
mirror of https://github.com/Noratrieb/womangling.git synced 2026-01-14 08:55:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

lesson 2 and fixes

Browse source
This commit is contained in:
nora 2025-02-14 20:27:36 +01:00
parent 6eb3332c34
commit a6a7cbf6fa
5 changed files with 229 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.css
View file

@ -45,7 +45,7 @@ footer {
.action-button {
width: 400px;
font-size: 1.5rem;
font-size: 1rem;
font-weight: bold;
padding: 20px;
background-color: var(--color-primary);
@ -53,6 +53,8 @@ footer {
border: none;
text-decoration: none;
display: block;
&:hover {
background-color: color-mix(in oklab, var(--color-primary), white 15%);
}
@ -64,6 +66,7 @@ footer {
display: flex;
flex-direction: column;
gap: 10px;
}
.step {
@ -74,6 +77,8 @@ footer {
.code {
padding-left: 30px;
overflow: scroll;
max-width: calc(100vw - 40px);
}
.hidden {
@ -115,3 +120,7 @@ form[data-challenge] > .error {
height: 2.5rem;
font-size: 1rem;
}
.lesson-last-paragraph {
margin-bottom: 40px;
}

17
index.html
View file

@ -9,7 +9,7 @@
<body>
<main class="main">
<div class="content">
<h1>Learn C++ Symbol Itanium Mangling</h1>
<h1>Learn C++ Itanium Symbol Mangling</h1>
<noscript>
<p>
Warning: You have JavaScript disabled While the content is still
@ -18,7 +18,7 @@
</p>
</noscript>
<p>
This website will teach you C++ Itanium Name Mangling. Itanium-style
This website will teach you C++ Itanium Symbol Name Mangling. Itanium-style
mangling is used on a lot of platforms, including Linux.
</p>
<p>
@ -32,11 +32,14 @@
</p>
<div class="center">
<ol class="lessons-list">
<li class="lesson-list-item">
<a href="lesson-0.html">C names</a>
<li>
<a href="lesson-0.html" class="action-button">Lesson 0: C names</a>
</li>
<li class="lesson-list-item">
<a href="lesson-1.html">Basics</a>
<li>
<a href="lesson-1.html" class="action-button">Lesson 1: Basics</a>
</li>
<li>
<a href="lesson-2.html" class="action-button">Lesson 2: Arguments</a>
</li>
</ol>
</div>
@ -45,7 +48,7 @@
<button
onclick="localStorage.removeItem('lessons') ; alert('deleted data')"
>
reset
reset data
</button>
</footer>
</main>

4
lesson-0.html
View file

@ -15,7 +15,7 @@
<h2>Lesson 0: Intro and C names</h2>
<noscript>
<p>
Warning: You have JavaScript disabled While the content is still
Warning: You have JavaScript disabled. While the content is still
viewable, interactive exercises will not work. Consider enabling
JavaScript for this website.
</p>
@ -103,7 +103,7 @@ extern "C" {
</section>
<section data-step="2" class="step">
<p>Congrats on answering your first mangling question!</p>
<p>
<p class="lesson-last-paragraph">
You now know how C functions are (not) mangled, which is a great
starting point for your C++ Itanium Symbol Mangling Adventures. I
wish you good luck for the rest!

20
lesson-1.html
View file

@ -15,7 +15,7 @@
<h2>Lesson 1: Basics</h2>
<noscript>
<p>
Warning: You have JavaScript disabled While the content is still
Warning: You have JavaScript disabled. While the content is still
viewable, interactive exercises will not work. Consider enabling
JavaScript for this website.
</p>
@ -52,8 +52,7 @@ void f() {}
</p>
<p>
We will see the <code>v</code> function type a lot in the rest of
this guide. It stands for a function that takes no arguments and
returns <code>void</code>.
this guide. It stands for a function that takes no arguments.
</p>
<div class="quiz-section">
<p>
@ -129,10 +128,11 @@ void meow() {}
</p>
<p>
Nested names start with an <code>N</code> and end with an
<code>E</code>. Between those two letters, the hierarchy of the
namespace is represented by putting on namespace name after another,
with the function name last. Every name has the leading length and
then the name itself, just like with global names.
<code>E</code> (the <code>E</code> stands for "end" and is commonly
used to end sequences). Between those two letters, the hierarchy of
the namespace is represented by putting on namespace name after
another, with the function name last. Every name has the leading
length and then the name itself, just like with global names.
</p>
<pre class="code">
namespace outer {
@ -168,7 +168,7 @@ namespace a {
</pre>
<p>
This function will mangle as <code>_ZN1a1b1c5innerEv</code>. We get
all the concatinated names as <code>1a1b1c5inner</code>, with the
all the concatenated names as <code>1a1b1c5inner</code>, with the
previously mentioned characters around them.
</p>
@ -210,7 +210,7 @@ namespace cats {
with information, so feel free to take a break and let the previous
knowledge sink in.
</p>
<p>
<p class="lesson-last-paragraph">
If you want to try out more code and look at its mangling, I
recommend using Compiler Explorer on
<a href="https://godbolt.org">godbolt.org</a>. Under "Output", you
@ -219,7 +219,7 @@ namespace cats {
</p>
<div class="center">
<a href="lesson-2.html" class="action-button">
Lesson 2: something that has not been written yet.
Lesson 2: Arguments
</a>
</div>
</section>

197
lesson-2.html Normal file
View file

@ -0,0 +1,197 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Womangling</title>
</head>
<body>
<main class="main">
<div class="content" id="content-area">
<h1>
<a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
</h1>
<h2>Lesson 2: Lesson 2: Arguments</h2>
<noscript>
<p>
Warning: You have JavaScript disabled. While the content is still
viewable, interactive exercises will not work. Consider enabling
JavaScript for this website.
</p>
</noscript>
<!-- https://itanium-cxx-abi.github.io/cxx-abi/abi.html#mangle.function-type -->
<section data-step="0" class="step">
<p>
All symbols that we have looked at so far have ended with a
<code>v</code>. I have previously explained that the
<code>v</code> stands for a function type with no arguments.
</p>
<p>
C++ has function overloading, which means that a function with the
same name can be declared multiple times with different argument
types, and the one with matching argument types will be called. If
we just mangled the function name as shown previously, this wouldn't
work, because we'd get multiple symbols with the same name, which is
exactly what mangling is designed to avoid. Therefore, any C++
mangling scheme must encode the function argument types in the
symbol name.
</p>
<pre class="code">
void a(int x);
void a(char *y);
int main() {
a(0); // This will call the first a
}
</pre>
<p>
The function type is encoded after the name. It contains all the
arguments for the function. In some cases it will also contain the
return type first, but not for the functions we are looking at right
now.
</p>
<pre class="code">
void a(int x, int y, long z) {}
</pre>
<p>
This function will be mangled as <code>_Z1aiil</code>. We already
know what <code>_Z1a</code> means, but the <code>iil</code> is new.
It represents the three arguments, an <code>int</code>, another
<code>int</code>, and then a <code>long</code>. The primitives are
just a single character, more complex types have more characters.
</p>
<p>
A function taking zero arguments is interpreted as a function taking
<code>(void)</code>, which is encoded as <code>v</code>.
</p>
<p>
<code>int</code> is <code>i</code>, <code>long</code> is
<code>l</code>. <code>float</code> is <code>f</code>,
<code>double</code> is <code>d</code>. These types are very easy to
remember, many others less so. Other easy to remember frequently
used types are pointers (<code>T*</code>) which are encoded as
<code>P</code> followed by the pointed to type and references
(<code>T&</code>) which encoded as <code>R</code> followed by the
referenced type.
</p>
<pre class="code">
void a(int x, int *y, double &z) {}
</pre>
<p>
This function is mangled as <code>_Z1aiPiRd</code>. It's an
<code>int</code> (<code>i</code>), a
<code>int*</code> (<code>Pi</code>), and a
<code>double&</code> (<code>Pd</code>).
</p>
<div class="quiz-section">
<p>What is the mangled symbol of the following function?</p>
<pre class="code">
void hello(int **programmer, long day, float &r) {}
</pre>
<form data-challenge="1" data-answer="_Z5helloPPilRf">
<input class="quiz-input" />
<button
data-challenge-submit="1"
data-hint="An int** is PPi, a pointer to a pointer to an integer"
class="submit-challenge"
type="submit"
>
Answer
</button>
<div class="error"></div>
</form>
</div>
</section>
<section data-step="1" class="step">
<p>
We can combine this with our previous knowledge of nested names to
mangle the following definition:
</p>
<pre class="code">
namespace outer::inner {
void yes(int a, int b, long &c) {}
}
</pre>
<p>This will be mangled as <code>_ZN5outer5inner3yesEiiRl</code></p>
<div class="quiz-section">
<p>What is the mangled symbol of the following function?</p>
<pre class="code">
namespace very::much::nested {
void name(int **a, long &raw, float f, double d) {}
}
</pre>
<form
data-challenge="2"
data-answer="_ZN4very4much6nested4nameEPPiRlfd"
>
<input class="quiz-input" />
<button
data-challenge-submit="2"
data-hint="Don't forget the N and E"
class="submit-challenge"
type="submit"
>
Answer
</button>
<div class="error"></div>
</form>
</div>
</section>
<section data-step="2" class="step">
<p>Let's look at a few more common types.</p>
<p>
<code>char</code> is <code>c</code>. <code>unsigned int</code> is
<code>j</code> (like <code>i</code> but one higher).
<code>unsigned long</code> is <code>m</code>, following the same
pattern. <code>long long</code> (64-bit) is <code>x</code> (you can
think of it being the native integer, integer x on modern machines)-
<code>unsigned long long</code> is <code>y</code>, again being one
higher. <code>short</code> is <code>s</code>, with its unsigned
variant being, you may have guessed it, <code>t</code>.
</p>
<p>
In the future there might be a part of the website where you can
memorize these encodings more easily.
</p>
<div class="quiz-section">
<p>What is the mangled symbol of the following function?</p>
<pre class="code">
void name(unsigned long long a, unsigned short b, char c, int d) {}
</pre>
<form
data-challenge="3"
data-answer="_Z4nameytci"
data-hint="Remember that unsigned variants are one higher in the alphabet"
>
<input class="quiz-input" />
<button
data-challenge-submit="3"
class="submit-challenge"
type="submit"
>
Answer
</button>
<div class="error"></div>
</form>
</div>
</section>
<section data-step="3" class="step">
<p>
Good job! You have now learnt about the mangling of basic types.
</p>
<p class="lesson-last-paragraph">
This is the last lesson that has been written so far. More lessons
may appear in the future.
</p>
</section>
</div>
</main>
<script>
window.LESSON = 2;
</script>
<script type="module" src="lessons.js"></script>
</body>
</html>