Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

لو كنت لا تريد أو لا تملك الصلاحية لترقية المتصفح يمكنك أن تستمر في التصفح على الرحب و السعة لكن تذكر قد لا تتمكن من استعراض بعض خدمات الموقع بالشكل المطلوب . بالطبع يمكنك إخفاء هذه الرسالة و تستمر في التصفح و لن تظهر لك هذه الرسالة مرة أخرى .

Post Pic

المدون الضيف: تحسين طباعة الروابط

طريقة جديدة و مبتكرة لعرض الوصلات عند الطباعة في الهامش. الطريقة تعتمد على استخدام الجافا سكريبت و الcss .

تحسين طباعة الروابط

لعل من أهم مميزات صفحات الطرز المتراصة CSS هي التحكم الكامل في كيفية عرض مستند HTML حسب ما يريد كاتبه. فيمكننا مثلاً عرض نفس المستند بأشكال مختلفة على حسب نوعية المتصفح، فإذا كان الزائر يستخدم الحاسوب على سبيل المثال، فيمكننا عرض شكل الصفحة بما يتناسب مع شاشة الحاسوب. وإذا كان الزائر يستخدم متصفحاً كفيّاً، يمكننا أيضاً عرض نفس المستند، ولكن بشكل يتناسب أكثر مع شاشة المتصفحات الكفيّة الصغيرة.

ويمكننا أيضاً الاستفادة من CSS عند الطباعة. كما تفضلت أختي الفاضلة فاطمة العمادي، وطرحت بعض الأفكار التي يمكننا الاستفادة منها عند طباعة مستندات HTML من الويب.

إحدى الحيل التي طرحتها فاطمة كانت “إظهار عناوين الوصلات”. وكانت حيلة جميلة، حيث أن مستندات HTML حرفها الأول H وهو اختصار Hypertext، ومعناه النص التشعبي، وعند النقر عليه يؤدي إلى نصوص وصفحات أخرى. ولكن عند طباعة المستند على الورق، يفقد الرابط هذه الخاصية التشعبية ويصبح جامداً. لذلك كانت هذه الحيلة مفيدة لمعرفة الروابط عند الطباعة وإلى أين تؤدي، حتى إذا أراد الزائر تتبعها على الويب، يستطيع وبكل سهولة.

صعوبة قراءة الروابط المتداخلة

قرأت مقالة للكاتب Aaron Gustafson على موقع A List Apart يتحدث فيه عن المشكلة التي يواجهها عند استخدام مثل هذه التقنية عند الطباعة. حيث أنها مثالية جداً عندما تكون الروابط قليلة ومتفرقة في الصفحة.

readability-less-links

ولكن تتعقد الأمور عندما تكون الروابط في الصفحة كثيرة ومتجانبة. وربما تكون بعض الروابط باللغة العربية مما يزيد الطين بلة، وتظهر الرموز بدلاً من الأحرف العربية. وتصعب حينها قابلية القراءة.

readability-more-links

إذاً مالحل؟

استخدام الحواشي

ربما قرأتم الكثير من الكتب، ولاحظتم أنه يتم استخدام الحواشي أسفل الصفحات لسرد قائمة التعاريف أو مصادر الإقتباس للرجوع إليها. والحل الذي قدمه Aaron في مقاله كان معاملة مستندات HTML كالكتب، وإدراج كل رابط أو مصدر اقتباس في آخر الصفحة المطبوعة. حيث باستخدام هذه الحيلة نجني فائدتين:

  1. سهولة الرجوع إلى المصادر والروابط التشعبية على الورق لاحقاً.
  2. تحسين قابلية القراءة.

جافاسكربت للمهمات الصعبة

جربت استخدام الحل المطروح في المقال على مقال كنت قد كتبته من قبل على المشروع. وكانت النتيجة غير مرضية، خصوصاً وأن بعض الروابط كانت باللغة العربية.

ala-example-1

الحاشية.

ala-example-2

لذا فكرت في استخلاص الفكرة، وكتابتها بطريقتي الخاصة التي تفيد المقالات العربية والتي لها خصوصيتها من ناحية الكتابة من اليمين وبعض الأمور الأخرى.

my-example-1

الحاشية.

my-example-2

وكعربون شكر وتقدير لهذا الموقع القدير، والذي تعلمت منه الكثير في بدايتي. قررت طرح البرمجية لكم بترخيص حر ومجاني غنو GNU GPL النسخة الثانية.

إضافة الروابط للطباعة لمكتبة jQuery مع CSS

my-example-page

عند عرض طباعة المقال، سترون تحسناً واضحاً، وإدراج الروابط بشكل تلقائي في نهاية الصفحة. والشفرة التالية بلغة الجافاسكربت خاصة بالإضافة لمكتبة jQuery.

/*
برنامج إضافة الروابط للطباعة لمكتبة jQuery للجافاسكربت الإصدار ١,٠، حقوق النسخ © ٢٠٠٩ <عبدالرحمن العتيبة> abdulrahman@mawqey.com
هذا البرنامج يوزع دون أية ضمانات على الإطلاق؛

هذا البرنامج حر، يحق لك توزيعه و/أو تعديله وفقاً لبنود رخصة غنو
العمومية كما نشرتها مؤسسة البرمجيات الحرة، الإصدار
الثاني.

هذا البرنامج يوزع على أمل أن يكون مفيداً، ولكن دون أية ضمانات،
بما في ذلك ضمانات التسويق أو الملاءمة لغرض معين. انظر رخصة غنو
العمومية لمزيد من التفاصيل.
*/
(function($) {
	$.fn.linksForPrint = function() {
		var container = this;
		$hr = $("<hr/>")
			.addClass("nodisplay")
			.insertAfter(container);
		$footnotes = $("<div/>")
			.addClass("footnotes nodisplay")
			.insertAfter($hr);
		$orderedList = $("<ol/>")
			.appendTo($footnotes);

		var subNumber = 1;
		var linksArr = [];
		var subText = '';
		$(container).find("*[cite],*[href]").each(function(){
			var link = $(this).attr("href") ? $(this).attr("href") : $(this).attr("cite");

			if ((i = $.inArray(link, linksArr)) > -1)
			{
				subText = i + 1;
			}
			else
			{
				subText = subNumber;
				$orderedList.append("<li>&#x202A;" + decodeURI(link) + "&#x202C;</li>");
				linksArr.push(link);
				subNumber++;
			}
			subText = "&#x200F;<sup class=\"nodisplay\">(" + subText + ")</sup>";
			if (this.tagName.toLowerCase() == 'blockquote')
			{
				$(this).children(":last-child").append(subText);
			}
			else
			{
				$(this).after(subText);
			}
		});
		$(container).addClass("deleteLinks");
	}
})(jQuery);

ستحتاجون إضافة القليل من شفرات CSS. حيث هذه الشفرات تهتم بإخفاء الروابط عند زيارة الصفحة من الحاسوب، وإظهارها عند الطباعة.

@media screen
{
	.nodisplay
	{
		display:none;
	}
}
@media print
{
	.article a:after
	{
		content: " ("attr(href)")";
		font-size: 90%;
	}
	.deleteLinks a:after
	{
		content: "";
	}
	.footnotes
	{
		font-size: 90%;
	}
}

استخدامها

كل ماعليكم فعله هو نسخ الشفرة في الأعلى، ولصقها في ملف يمكنكم تسميته linksforprint.js وإدراجه في مستند HTML كما في صفحة المثال، ومن ثم اختيار تقسيمة المقال div عبر jQuery selectors.

عندما تكون الصفحة جاهزة document.ready نقوم باختيار تقسيمة المقال article div لتطبيق الشفرة عليها، والتي تتيح جمع وعرض الروابط عند الطباعة. اخترت التقسيمة باسم الفئة class name وهي باسم article. لذا، عندما أختار تقسيمة المقال سأختارها بالشفرة التالية:

<script type="text/javascript">
//<![CDATA[
$(function(){
	$(".article").linksForPrint();
});
//]]>
</script>

هنا يمكنكم التعديل، قد لا تكون تقسيمة المقال لديكم باسم article لذا يمكنكم تسيمتها واختيارها حسب تقسيمة المقال لديكم.

شرح الشفرة

تجهيز الحاشية لإدراج الروابط

في البداية، نجهز خطاً أفقياً لإنهاء المقال وبدء مساحة الروابط والمراجع (تقسيمة div مع عنصر القائمة المرتية ol) تكون أسفل المقال. ثم إضافة فئة class اسمها nodisplay حتى لا تظهر المساحة لزائر المقال من شاشة الحاسوب. وإنما فقط عند الطباعة.

var container = this;
$hr = $("<hr/>")
	.addClass("nodisplay")
	.insertAfter(container);
$footnotes = $("<div/>")
	.addClass("footnotes nodisplay")
	.insertAfter($hr);
$orderedList = $("<ol/>")
	.appendTo($footnotes);
@media screen
{
	.nodisplay
	{
		display:none;
	}
}

جمع كل ماهو رابط ومرجع

var subNumber = 1;
var linksArr = [];
var subText = '';
$(container).find("*[cite],*[href]").each(function(){
	var link = $(this).attr("href") ? $(this).attr("href") : $(this).attr("cite");

نقوم بتعريف متغيرات بسيطة تساعدنا في التخلص من الروابط المتكررة، ومن ثم جمع كل العناصر التي لديها خاصية href أو خاصية cite عن طريق jQuery selectors. ومن ثم المرور بها كل على حدى.

نقوم بتسجيل المرجع إذا كان رابطاً href أو مرجع cite في متغير نسيمه link.

if ((i = $.inArray(link, linksArr)) > -1)
{
	subText = i + 1;
}

للتخلص من الروابط المتكررة، نقوم بالتأكد إذا كان الرابط الحالي المعرف في متغير link معرّف مسبقاً في المصفوفة linksArr عبر استخدام دالة inArray. إذا كان كذلك، سنقوم بأخذ رقمه التسلسلي والمسجل في متغير i وإضافة 1 عليه. لأنه كما تعلمون العد في اللغات البرمجية والإلكترونيات يبدأ من الصفر.

else
{
	subText = subNumber;
	$orderedList.append("<li>&#x202A;" + decodeURI(link) + "&#x202C;</li>");
	linksArr.push(link);
	subNumber++;
}

إن كان الرابط غير مكرر مسبقاً، إذاً هو جديد، لذا سنقوم بأخذ رقمه من متغير subNumber والذي يزيد كل مرة بمقدار واحد وتسجيله في متغير subText. ومن ثم فتح عنصر قائمة li وإدراج الرابط فيه، لإدراجه لاحقاً في المساحة التي جهزناها للمراجع.

ستلاحظون استخدامي لبعض من محارف يونيكود.

&#x202A;
&#x202C;
&#x200F;

هذه المحارف المخفية تهتم بتحويل اتجاه النص الذي يكتب من اليمين أو اليسار. وقد كتبت مقالاً يشرح استعمالها لمزيد من المعلومات حولها.

دالة decodeURI تهتم بتحويل رموز URI للنطاقات العربية إلى أحرف مفهومة. لأن الروابط المكتوبة باللغة العربية يتم تحويلها إلى رموز ليفهمها المتصفح، مثلاً حرف الحاء (ح) يساوي (%D8%AD).

من ثم نقوم بتسجيل الرابط في مصفوفة التأكد من الرابط الفريد (الغير مكرر) للعنصر التالي.

ادراج رقم الحاشية

subText = "&#x200F;<sup class=\"nodisplay\">(" + subText + ")</sup>";
if (this.tagName.toLowerCase() == 'blockquote')
{
	$(this).children(":last-child").append(subText);
}
else
{
	$(this).after(subText);
}

نقوم الآن بأخذ رقم الحاشية من المتغير subText والذي تم تسجيله سابقاً. ووضعه في عنصر sup والذي يعني الرقم الصغير الذي يأتي فوق النص للدلالة على الحاشية.

عند الاقتباس باستخدام عنصر blockquote ففي العادة، يتم إدراج عنصر كتلة block element آخر بداخله سواء فقرة p أو قائمة li أو ol. لذلك علينا أن ندرج رقم الحاشية بعد آخر عنصر ولد last child element داخله، وفي نفس الوقت يكون داخل عنصر blockquote.

وإذا كان أي عنصر آخر سواء رابط a أو اقتباس ضمني q سيكون رقم الحاشية محاذياً له.

جافاسكربت معطّلة؟ لا مشكلة!

$(container).addClass("deleteLinks");

يمكننا وبكل بساطة الرجوع إلى الحركة القديمة لإدراج الروابط بشكل ضمني مع النصوص عند تعطيل الجافاسكربت. حيث بإضافة فئة deleteLinks نقوم بمنعها من الظهور إذا كان المتصفح يستخدم الجافاسكربت. ولكن إن كانت معطلة، فإضافة الفئة لن تتم. ويمكننا الرجوع بأمان degrading gracefully إلى الروابط الضمنية.

@media print
{
	.article a:after
	{
		content: " ("attr(href)") ";
		font-size: 90%;
	}
	.deleteLinks a:after
	{
		content: "";
	}
}

كلمة الموقع

كل الشكر و التقدير للأخ عبدالرحمن العتيبة على مشاركته في فكرة المدون الضيف و تلبيته الدعوة و كتابة هذا الموضوع و روح العطاء و المشاركة التي أحاط بها زوار المدونه و كلنا أمل أنا لا تكون المشاركة الأخيرة

بقلم : عبدالرحمن العتيبة

عبدالرحمن العتيبة أحد مؤسسي ورئيس التحرير في موقع المشروع، يهوى برمجة وتطوير الويب بكافة أنواعها، وله خبرة تتعدى 10 سنوات في هذا المجال، يعتبر نفسه من "أشد" مناصري المصادر المفتوحة، وأنها "في يوم ما" ستقضي على كل برنامج محتكر ومغلق مصدره. يعتقد بوجود القمر، ولكنه للأسف لم يصل إليه إلى الآن. يمكنك متابعته على twitter وعلى مدونته.

أوسمة : , , ,

تعليقات الزوار (4)

[+] أضف تعليقك من فضلك



  1. zoe4ever كتب:

    حل جميل و رائع

    جزاك الله كل خير


  2. abdallh كتب:

    شرح روووعة وجميل

    بارك الله بك


  3. جبران كتب:

    حل عبقري ياعبدالرحمن، ماشاء الله عليك

    ونشكرك على الرخصة المفتوحة


اترك تعليقك