Inconsistent downloadable starting code for task

[Arvton]

Downloadable starting code

learn/tasks/writing-modes/logical-width-height-download.html
It differs from code shown in online editor.

Online editor code

learn/tasks/writing-modes/logical-width-height.html
Should the writing-mode for the vertical class be declared inside of the editable styles area? It can be declared after the box class styles. This makes the task easier to solve too.

[Arvton]

Permalinks to lead to the files:

Downloadable starting code
https://github.com/mdn/css-examples/blob/4970f5ac6d2726bc128233b531037d0306a9ad08/learn/tasks/writing-modes/logical-width-height-download.html

Online editor
https://github.com/mdn/css-examples/blob/4970f5ac6d2726bc128233b531037d0306a9ad08/learn/tasks/writing-modes/logical-width-height.html

[caugner]

I agree with the OP:

1. In the download version, the .vertical CSS rule could be moved below the .box rule here:
   

   css-examples/learn/tasks/writing-modes/logical-width-height-download.html

   Lines 15 to 26 in 4970f5a

   	.vertical {
   	writing-mode: vertical-rl;
   	}
   	.box {
   	border: 5px solid rebeccapurple;
   	background-color: lightgray;
   	padding: 40px;
   	margin: 40px;
   	width: 200px;
   	height: 100px;
   	}

2. In the editor version, the .vertical CSS rule should be moved inside the editable block:
   

   css-examples/learn/tasks/writing-modes/logical-width-height.html

   Lines 7 to 23 in 4970f5a

   	<style>
   	.vertical {
   	writing-mode: vertical-rl;
   	}
   	</style>
   	<style class="editable">
   	.box {
   	border: 5px solid rebeccapurple;
   	background-color: lightgray;
   	padding: 40px;
   	margin: 40px;
   	width: 200px;
   	height: 100px;
   	}
   	</style>

   
   And it also needs to be added inside the textarea:
   

   css-examples/learn/tasks/writing-modes/logical-width-height.html

   Lines 32 to 41 in 4970f5a

   	<textarea class="playable playable-css" style="height: 180px;">
   	.box {
   	border: 5px solid rebeccapurple;
   	background-color: lightgray;
   	padding: 40px;
   	margin: 40px;
   	width: 200px;
   	height: 100px;
   	}
   	</textarea>

[pragyamishra56]

@caugner Sir could you assign me this issue?

[backlog-developer]

@caugner I agree with the OP:

Option 1(Preferred for learning consistency)
Move .vertical into the editable block (after .box) in both the downloadable file and the editor.
this will make both versions identical and learners get the same experience . But maintainers need to update both files and textarea.

Option 2 ( make .vertical non-editable everywhere)
keep .vertical outside the editable block in both versions. That means learners don't have to write the writing-mode rule---it's already provided.
Which makes it easier to maintain and implement (just move it out of the textarea in the editor) by doing so task become less of a "learning by doing" exercsie since the solution is half given.

Option 3 (hybrid fix)
leave .vertical outside in the downloadable file ( so learners get a working example to study)
Keep .vertical inside the editable area only in the online editor.
By doing so learners using the website still solve the task but people who downloaded the code get a working demo right away.
Still inconsistent - might confuse the learners who switches between downloadable and online editor versions.

Perhaps option 1 is more suitable to approach with

Looking at he issue is still opened do you wish to get it fixed @Arvton

[caugner]

@pragyamishra56 @backlog-developer Feel free to start working on this and open a PR. 🙏